Anyone have a simple pure JavaScript slider? Please share.
I’m trying to make my own, but it’s still difficult. I want to take a ready-made solution as a basis and understand it.
var slide_left = document.getElementById ('slide-left'),
slide_right = document.getElementById ('slide-right'),
total_img = document.getElementsByTagName ('img');
slide_right.addEventListener ('click', moveLeft);
function moveLeft () {
slide_left.style.display = 'block';
}
full code https://jsfiddle.net/lilubanana/srkxLkou/
Answer 1, authority 100%
Corrected your example .
Your direction of thought was correct. It was only necessary to add the remaining logic for switching images. Here is the code with comments to what I added:
var slide_left = document.getElementById ('slide-left'),
slide_right = document.getElementById ('slide-right'),
total_img = document.getElementsByTagName ('img'),
idx = 0; // Index of the current slide.
slide_right.addEventListener ('click', moveLeft);
function moveLeft () {
slide_left.style.display = 'block';
total_img [idx] .style.display = 'none'; // Hide the current slide
total_img [++ idx] .style.display = 'block'; // Increment the index and show the next slide
if (idx === total_img.length - 1) {// Remove the "right" arrow if there are no more slides to the right
slide_right.style.display = 'none';
}
}
// Similarly, only for the left arrow
slide_left.addEventListener ('click', moveRight);
function moveRight () {
slide_right.style.display = 'block';
total_img [idx] .style.display = 'none';
total_img [- idx] .style.display = 'block';
if (idx === 0) {
slide_left.style.display = 'none';
}
}
Answer 2, authority 40%
Why create a bicycle, if it was created a long time ago on the Internet, you can find hundreds of sliders in pure JavaScript
. Example or search by request – pure JavaScript slider.
& lt;! DOCTYPE html & gt;
& lt; html lang = "ru" & gt;
& lt; head & gt;
& lt; title & gt; JavaScript slider. & lt; / title & gt;
& lt; meta charset = "utf-8" & gt;
& lt; / head & gt;
& lt; style & gt;
#main {
position: relative;
margin: 100px auto;
padding: 5px;
width: 660px;
height: 360px;
background-color: silver;
border: 5px solid gray;
border-radius: 15px;
}
#scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
border: 2px solid black;
border-radius: 10px;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 70px;
font: 12pt arial, tahoma, sans-serif;
text-align: center;
}
.left {
left: 5px;
}
.right {
right: 5px;
}
& lt; / style & gt;
& lt; script & gt;
var slider = {
slides: ['ch01.jpg', 'ch02.jpg', 'ch03.jpg', 'ch04.jpg', 'ch05.jpg'],
frame: 0, // current frame for displaying - index of the image from the array
set: function (image) {// set the desired background for the slider
document.getElementById ("scr"). style.backgroundImage = "url (" + image + ")";
},
init: function () {// start a slider with a picture with a zero index
this.set (this.slides [this.frame]);
},
left: function () {// rotate one frame left
this.frame--;
if (this.frame & lt; 0) this.frame = this.slides.length-1;
this.set (this.slides [this.frame]);
},
right: function () {// rotate one frame to the right
this.frame ++;
if (this.frame == this.slides.length) this.frame = 0;
this.set (this.slides [this.frame]);
}
};
window.onload = function () {// start the slider after loading the document
slider.init ();
setInterval (function () {// set a five-second interval for flipping through pictures
slider.right ();
}, 5000);
};
& lt; / script & gt;
& lt; body & gt;
& lt; div id = "main" & gt;
& lt; button class = "left" onclick = "slider.left ();" & gt; & lt; & lt; / button & gt;
& lt; div id = "scr" & gt; & lt; / div & gt;
& lt; button class = "right" onclick = "slider.right ();" & gt; & gt; & lt; / button & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;