Default
<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
<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
<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
<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>
Copyright © 2026 DesignReset, All rights reserved.
Coded with
