waitForTransition example

by Webberjo

HTML

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">
<section class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 1</li>
			<li class="splide__slide">Slide 2</li>
			<li class="splide__slide">Slide 3</li>
		</ul>
  </div>
</section>

CSS

.splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: black;
  font-size: 48px;
  color: white;
}

.splide__arrow {
  width: 48px;
  height: 48px;

  svg {
    width: 24px;
    height: 24px;
  }
}

JavaScript

var slider = new Splide('.splide', {
	type: 'loop',
	waitForTransition: true,
}).mount();