Slider, slider, sliders. We’ve got one on our homepage! 🙂 There, you will see the carefully designed images that slides left after a few seconds. At the bottom, there’s a typical JavaScript dot navigation. We’ll recreate that and even improve it with a help of the some media queries.
There’s a couple more sliders on the homepage but for this article, we’ll focus on the first.
Step 1: Setting Up the HTML Structure
We need the HTML structure first. How would you build it? What elements would you use?
<div class="slider-maain">
<div class="list-slider-maain">
<div class="item-slider-maain">
<img class="image-mobile" src="hero-fill-mobile-02.png" alt="">
<img class="image-desktop" src="hero-fill-01.png" alt=>
</div>
<div class="item-slider-maain ">
<img class="image-mobile" src="2-mobile.png" alt="">
<img class="image-desktop" src="2-dsktp.png" alt=>
</div>
<div class="item-slider-maain">
<img class="image-mobile" src="3-mobile.png" alt="">
<img class="image-desktop" src="3-dsktp.png" alt=>
</div>
</div>
<div class="buttons-slider-maain">
<button id="prev"><</button>
<button id="next">></button>
</div>
<ul class="dots-slider-maain">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>In this example, the .slider-maain class is the container for our slider, and the .list-slider-maain class contains each individual .slide. Replace the image source with the paths to your actual images.
Notice that we have a class declared as .image-mobile and .image-desktop. We’ll use these classes to resize the images later on using media queries.
Step 2: Styling the Slider with CSS
Now, let’s add some basic styling to make sure our slider looks nice and functions correctly.
Create a styles.css file with the following content:
.slider-maain{
width: 1300px;
max-width: 100vw;
height: 700px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 12px;
}
.slider-maain .list-slider-maain{
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s;
}
.slider-maain .list-slider-maain img{
width: 1300px;
max-width: 100vw;
height: 100%;
object-fit: cover;
}
.slider-maain .buttons-slider-maain{
position: absolute;
top: 45%;
left: 5%;
width: 90%;
display: flex;
justify-content: space-between;
}
.slider-maain .buttons-slider-maain button{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff5;
color: #fff;
border: none;
font-family: monospace;
font-weight: bold;
}
.slider-maain .dots-slider-maain{
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.slider-maain .dots-slider-maain li{
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
}
.slider-maain .dots-slider-maain li.active{
width: 30px;
}Step 3: Adding JavaScript Functionality
Finally, we need JavaScript to handle the automatic sliding functionality. Create a script.js file with the following code:
let slider = document.querySelector('.slider-maain .list-slider-maain');
let items = document.querySelectorAll('.slider-maain .list-slider-maain .item-slider-maain');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let dots = document.querySelectorAll('.slider-maain .dots-slider-maain li');
let lengthItems = items.length - 1;
let active = 0;
next.onclick = function(){
active = active + 1 <= lengthItems ? active + 1 : 0;
reloadSlider();
}
prev.onclick = function(){
active = active - 1 >= 0 ? active - 1 : lengthItems;
reloadSlider();
}
let refreshInterval = setInterval(()=> {next.click()}, 3000);
function reloadSlider(){
slider.style.left = -items[active].offsetLeft + 'px';
//
let last_active_dot = document.querySelector('.slider-maain .dots-slider-maain li.active');
last_active_dot.classList.remove('active');
dots[active].classList.add('active');
clearInterval(refreshInterval);
refreshInterval = setInterval(()=> {next.click()}, 4000);
}
dots.forEach((li, key) => {
li.addEventListener('click', ()=>{
active = key;
reloadSlider();
})
})
window.onresize = function(event) {
reloadSlider();
};That’s about it! But let’s spice it up a little. 😉
Assuming your images when resized for mobile do not come out right, we can use media queries to specify a mobile-centric design to be displayed when viewed on a mobile phone, and another to display when viewed on a desktop screen and so on.
Please note that for this step, you’ll need to design/adjust the image as you’d want it to appear on a mobile device. You can make use of a design software for that.
Here’s the codes for that. Add this piece of code below the last line of your css. We’ll be using the .image-mobile and .image-desktop classes to set this up. This is especially needed when you have a design with texts and you want to skip writing the codes for it to be responsive.
.image-mobile{
display: none;
}
@media only screen and (max-width: 500px)
{.image-desktop{
display: none;
}
.image-mobile{
display: block;
}
}Note: We’ve made it super easy for this code to be imported without messing up your existing style classes. Using this concept, you can resize the design for different screen size and use the media queries to hide/show them.
Conclusion
Congratulations! You’ve just built a simple auto slider using HTML, CSS, and JavaScript. What is more? We’ve explored using media queries to hide/display a particular image based on screen size.
As you experiment with different settings, you’ll gain a deeper understanding of how sliders work and how to tailor them to your specific requirements.
See the demo here
Leave a Reply