This tutorial will guide you through creating an image slider with thumbnails using SplideJS. SplideJS is a lightweight and versatile JavaScript library, making it an excellent choice for this target project.
Step 1: Include Splide CSS
First, you need to add the Splide CSS file to your project. This is done by including a link to the Splide CDN in the header of your HTML document.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@splidejs/splide@1.2.0/dist/css/splide.min.css'>
Step 2: Create the HTML Structure
Next, create the HTML structure for your image slider. This involves creating divs for the main slider and the thumbnail slider, and then adding image elements within each.
<div class="thumbnail_slider">
<h2>Thumbnails Image Slider</h2>
<!-- Primary Slider Start-->
<div id="primary_slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://images.pexels.com/photos/1539225/pexels-photo-1539225.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/13295150/pexels-photo-13295150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/4275890/pexels-photo-4275890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/3511104/pexels-photo-3511104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/276484/pexels-photo-276484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/2026452/pexels-photo-2026452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
</ul>
</div>
</div>
<!-- Primary Slider End-->
<!-- Thumbnal Slider Start-->
<div id="thumbnail_slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://images.pexels.com/photos/1539225/pexels-photo-1539225.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/13295150/pexels-photo-13295150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/4275890/pexels-photo-4275890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/3511104/pexels-photo-3511104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/276484/pexels-photo-276484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
<li class="splide__slide">
<img src="https://images.pexels.com/photos/2026452/pexels-photo-2026452.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1=1260">
</li>
</ul>
</div>
</div>
<!-- Thumbnal Slider End-->
</div>
Step 3: Add CSS Styling
Now, let’s add some CSS to style our slider. This CSS will handle the overall layout, image display, and active slide styling.
body {
background-color: #192a56;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h2 {
font-weight: 500;
font-size: 40px;
margin-bottom: 15px;
font-family: 'Atkinson Hyperlegible', sans-serif;
color: #fff;
text-align: center;
}
/* Need not body and h2 css */
/* Slider CSS Start */
.thumbnail_slider {
max-width: 700px;
margin: 30px auto;
}
.splide__slide {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
width: 580px;
overflow: hidden;
transition: .2s;
border-width: 2px !important;
margin: 10px 4px;
}
.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
box-shadow: 2px 3px 8px #000000a3;
}
.splide__slide img {
width: auto;
height: auto;
margin: auto;
display: block;
max-width: 100%;
max-height: 100%;
}
/* Slider CSS End */
Step 4: Include Splide JavaScript
Before closing the body tag, include the Splide JavaScript file from the CDN.
<script src='https://cdn.jsdelivr.net/npm/@splidejs/splide@1.2.0/dist/js/splide.min.js'></script>
Step 5: Add JavaScript Functionality
Finally, add the JavaScript code to initialize the Splide sliders and sync them together. This code creates two Splide instances, one for the main slider and one for the thumbnails, and then links them so they work in tandem.
// Primary slider.
var primarySlider = new Splide('#primary_slider', {
type: 'fade',
heightRatio: 0.5,
pagination: false,
arrows: false,
cover: true,
});
// Thumbnails slider.
var thumbnailSlider = new Splide('#thumbnail_slider', {
rewind: true,
fixedWidth: 100,
fixedHeight: 64,
isNavigation: true,
gap: 10,
focus: 'center',
pagination: false,
cover: true,
breakpoints: {
'600': {
fixedWidth: 66,
fixedHeight: 40,
}
}
}).mount();
// sync the thumbnails slider as a target of primary slider.
primarySlider.sync(thumbnailSlider).mount();
Congratulations! You’ve successfully created an image slider with thumbnails using SplideJS.