# Carousel

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

    <!-- 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts