@@ -163,6 +163,22 @@ const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakp
|
163 | 163 | const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft)) |
164 | 164 | const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight)) |
165 | 165 | |
| 166 | +const stopAutoplayOnInteraction = computed(() => { |
| 167 | + if (typeof props.autoplay === 'boolean') { |
| 168 | + return true |
| 169 | + } |
| 170 | + |
| 171 | + return props.autoplay.stopOnInteraction ?? true |
| 172 | +}) |
| 173 | + |
| 174 | +const stopAutoScrollOnInteraction = computed(() => { |
| 175 | + if (typeof props.autoScroll === 'boolean') { |
| 176 | + return true |
| 177 | + } |
| 178 | + |
| 179 | + return props.autoScroll.stopOnInteraction ?? true |
| 180 | +}) |
| 181 | + |
166 | 182 | const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })({ |
167 | 183 | orientation: props.orientation |
168 | 184 | })) |
@@ -223,12 +239,26 @@ watch(options, () => {
|
223 | 239 | emblaApi.value?.reInit(options.value, plugins.value) |
224 | 240 | }, { flush: 'post' }) |
225 | 241 | |
| 242 | +function stopOnInteraction() { |
| 243 | + if (stopAutoplayOnInteraction.value) { |
| 244 | + emblaApi.value?.plugins().autoplay?.stop() |
| 245 | + } |
| 246 | + |
| 247 | + if (stopAutoScrollOnInteraction.value) { |
| 248 | + emblaApi.value?.plugins().autoScroll?.stop() |
| 249 | + } |
| 250 | +} |
| 251 | + |
226 | 252 | function scrollPrev() { |
227 | 253 | emblaApi.value?.scrollPrev() |
| 254 | + stopOnInteraction() |
228 | 255 | } |
| 256 | + |
229 | 257 | function scrollNext() { |
230 | 258 | emblaApi.value?.scrollNext() |
| 259 | + stopOnInteraction() |
231 | 260 | } |
| 261 | + |
232 | 262 | function scrollTo(index: number) { |
233 | 263 | emblaApi.value?.scrollTo(index) |
234 | 264 | } |
|