beyonk-group/svelte-carousel

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.