Default

  • slider-image
  • slider-image
  • slider-image

<div class="position-relative">
    <div class="container" style="max-width: 560px">
        <div class="splide">
            <div class="splide__track">
                  <ul class="splide__list">
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-1.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-2.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-3.jpg">
                        </li>
                  </ul>
            </div>
        </div>
    </div>
</div>

Pagination

  • slider-image
  • slider-image
  • slider-image

<div class="position-relative">
    <div class="container" style="max-width: 560px">
        <div class="splide-pagination">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-1.jpg">
                    </li>
                    <li class="splide__slide">
                        <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-2.jpg">
                    </li>
                    <li class="splide__slide">
                        <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-3.jpg">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Multiple Slides

  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image

<div class="position-relative">
    <div class="container" style="max-width: 700px">
        <div class="splide-multiple">
            <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-1.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-2.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-3.jpg">
                        </li>

                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-1.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-2.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-3.jpg">
                        </li>

                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-1.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-2.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-3.jpg">
                        </li>

                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-1.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-2.jpg">
                        </li>
                        <li class="splide__slide">
                            <img alt="slider-image" class="img-fluid" src="../src/assets/img/products/product-3.jpg">
                        </li>
                    </ul>
            </div>
        </div>
    </div>
</div>

Thumbnails

  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image

<div class="position-relative">
    <div class="container" style="max-width: 700px">
        <div class="splide-mainThubnail">
            <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide">
                            <a href="./assets/img/product-1.jpg" class="glightbox"><img alt="slider-image" src="../src/assets/img/products/product-1.jpg"></a>
                        </li>
                        <li class="splide__slide">
                            <a href="./assets/img/product-2.jpg" class="glightbox"><img alt="slider-image" src="../src/assets/img/products/product-2.jpg"></a>
                        </li>
                        <li class="splide__slide">
                            <a href="./assets/img/product-3.jpg" class="glightbox"><img alt="slider-image" src="../src/assets/img/products/product-3.jpg"></a>
                        </li>
                        <li class="splide__slide">
                            <a href="./assets/img/product-1.jpg" class="glightbox"><img alt="slider-image" src="../src/assets/img/products/product-1.jpg"></a>
                        </li>
                        <li class="splide__slide">
                            <a href="./assets/img/product-2.jpg" class="glightbox"><img alt="slider-image" src="../src/assets/img/products/product-2.jpg"></a>
                        </li>
                        <li class="splide__slide">
                            <a href="./assets/img/product-3.jpg" class="glightbox"><img alt="slider-image" src="../src/assets/img/products/product-3.jpg"></a>
                        </li>
                    </ul>
            </div>
            </div>

        <div id="thumbnail-slider" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide"><img alt="slider-image" src="../src/assets/img/products/product-1.jpg"></li>
                    <li class="splide__slide"><img alt="slider-image" src="../src/assets/img/products/product-2.jpg"></li>
                    <li class="splide__slide"><img alt="slider-image" src="../src/assets/img/products/product-3.jpg"></li>
                    <li class="splide__slide"><img alt="slider-image" src="../src/assets/img/products/product-1.jpg"></li>
                    <li class="splide__slide"><img alt="slider-image" src="../src/assets/img/products/product-2.jpg"></li>
                    <li class="splide__slide"><img alt="slider-image" src="../src/assets/img/products/product-3.jpg"></li>
                </ul>
            </div>
        </div>
    </div>
</div>