Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

  • Slide 01
  • Slide 02
  • Slide 03
              
<!-- carousel slider -->
<div class="splide nav-hidden" role="group" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide py-32 px-12 bg-gray-50 dark:bg-gray-800 text-center">Slide 01</li>
      <li class="splide__slide py-32 px-12 bg-gray-50 dark:bg-gray-800 text-center">Slide 02</li>
      <li class="splide__slide py-32 px-12 bg-gray-50 dark:bg-gray-800 text-center">Slide 03</li>
    </ul>
  </div>
</div>

Need to add splide.css in <head> to make carousel work

              
<link rel="stylesheet" id="stylesheet" href="../src/css/vendor/splide.css">

Need to add splide.js and config.js before </body> to make carousel work

              
<!-- Splide js -->
<script src="../vendors/@splidejs/splide/dist/js/splide.min.js"></script>
<script>
// Splide config
const mySplide = function () {
  const splide_class = document.querySelector(".splide");
  if ( splide_class != null) {
    document.addEventListener( 'DOMContentLoaded', function() {
      var splide = new Splide( '.splide' );
      splide.mount();
    } );
  }
}
mySplide();
</script>