≪
≫
Responsive autoplay slider
#slider #prev, #slider #next {
width: 40px;
line-height: 40px;
font-size: 1.5rem;
text-shadow: 0 0 20px rgba[0, 0, 0, 0.6];
text-align: center;
color: black;
background: #f9f7fb;
text-decoration: none;
position: absolute;
top: 50%;
transform: translateY[-50%];
transition: all 150ms ease;
}
#slider #prev:hover, #slider #next:hover {
background-color: rgba[0, 0, 0, 0.5];
text-shadow: 0;
color: white;
}
#slider #next {
right: 0px;
}
Step 4:Activate Responsive Image Slider with JavaScript
We have designed the whole above and now we will implement it using the JavaScript below. First I set the constants of some ID functions. Because no ID or class function can be used directly in JavaScript.
var slider = document.getElementById["slider"];
var slideList = document.getElementById["slideWrap"];
var prev = document.getElementById["prev"];
var next = document.getElementById["next"];
var count = 1;
var sliderWidth = slider.offsetWidth;
var items = slideList.querySelectorAll["li"].length;
window.addEventListener['resize', function[] {
sliderWidth = slider.offsetWidth;
}];
Now I have activated the Previs button. I have saved what works by clicking on the Previs button in a constant called prevSlide.
var prevSlide = function[] {
if[count > 1] {
count = count - 2;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if[count = 1] {
count = items - 1;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
};
Now I have executed the Next button using the JavaScript code below. I have saved what will happen next when you click on the Next button in a constant called nextSlide.
var nextSlide = function[] {
if[count < items] {
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if[count = items] {
slideList.style.left = "0px";
count = 1;
}
};
Now I have added all the calculations with two buttons. Above we gave the condition for the buttons. I saved them in nextSlide and prevSlide. Now I have connected those two constants with the button.
next.addEventListener["click", function[] {
nextSlide[];
}];
prev.addEventListener["click", function[] {
prevSlide[];
}];
Above we have implemented the image change with the help of two navigation buttons. Now I have arranged for the automatic images to be changed. I have used setInterval for this and the condition given in nextSlide every 5 seconds or 5000 milliseconds will be effective.
That means we will see the next image every five seconds. If you want to change this time i.e. use two or three seconds instead of 5 seconds then you can use 2000 or 3000 instead of 5000 here.
setInterval[function[] {
nextSlide[]
}, 5000];
Final Javascript Code
Below I have given the final JavaScript to help you understand how this JavaScript structure works.
var responsiveSlider = function[] {
var slider = document.getElementById["slider"];
var slideList = document.getElementById["slideWrap"];
var prev = document.getElementById["prev"];
var next = document.getElementById["next"];
var count = 1;
var sliderWidth = slider.offsetWidth;
var items = slideList.querySelectorAll["li"].length;
window.addEventListener['resize', function[] {
sliderWidth = slider.offsetWidth;
}];
var nextSlide = function[] {
if[count < items] {
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if[count = items] {
slideList.style.left = "0px";
count = 1;
}
};
var prevSlide = function[] {
if[count > 1] {
count = count - 2;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if[count = 1] {
count = items - 1;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
};
next.addEventListener["click", function[] {
nextSlide[];
}];
prev.addEventListener["click", function[] {
prevSlide[];
}];
setInterval[function[] {
nextSlide[]
}, 5000];
};
window.onload = function[] {
responsiveSlider[];
}
Hopefully from this tutorial, you have learned how to create automatic and manual image sliders. In the meantime, I have created image sliders using automatic and navigation buttons separately. If you are a beginner then you can see those designs.
Download Code The download will start automatically