Constant spinning Slider when autoplay is on, even when duration is set.
michaelcuneo opened this issue · 3 comments
Can't seem to stop the slider from spinning around like crazy when autoplay is on.
<script>
import Carousel from '@beyonk/svelte-carousel'
import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'
import Banner_1 from '../images/Banners_lunch.jpg'
import Banner_2 from '../images/Banners_craft.jpg';
import Banner_3 from '../images/Banners_restaurant.jpg';
import Banner_4 from '../images/Banners_entertainment.jpg';
import Banner_5 from '../images/Banners_functions.jpg';
</script>
<Carousel perPage="1" autoplay duration={2000}>
<span class="control" slot="left-control">
<ChevronLeftIcon />
</span>
<banner class="slide-content">
<img src={Banner_1} alt={Banner_1} />
</banner>
<banner class="slide-content">
<img src={Banner_2} alt={Banner_2} />
</banner>
<banner class="slide-content">
<img src={Banner_3} alt={Banner_3} />
</banner>
<banner class="slide-content">
<img src={Banner_4} alt={Banner_4} />
</banner>
<banner class="slide-content">
<img src={Banner_5} alt={Banner_5} />
</banner>
<span class="control" slot="right-control">
<ChevronRightIcon />
</span>
</Carousel>
<style>
banner {
width: 100%;
height: auto;
}
span {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.4);
color: white;
}
img {
width: 100%;
height: auto;
}
</style>
The problem is coming from the value passed to autoplay
prop. It is supposed to be a number indicating the interval between shifts in milliseconds so when we pass true
the interval will be set to run every 1 millisecond producing the crazy spinning.
Wow, this was such a simple fix, I can't see how I didn't see this. Judging from the documentation the duration is set with the duration variable. Not a value passed to autoPlay.
Yeah this probably isn't the most obvious way to handle autoplay. The flip-side is that you can set a duration and then not turn on autoplay, which is also a bit awkward. I'm open to suggestions to improve this API.