Home javascript Simple pure JavaScript slider

Simple pure JavaScript slider

Author

Date

Category

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;

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions