Simple slider in pure JavaScript

Does anyone have a simple slider in pure JavaScript? Please share it.
I'm trying to make my own, but it's still a bit complicated. 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/

Author: Grundy, 2016-01-07
Source

2 answers

I corrected your example.

Your line 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; // Индекс текущего слайда.

slide_right.addEventListener('click', moveLeft);
function moveLeft(){
    slide_left.style.display = 'block';
    total_img[idx].style.display = 'none'; // Скрываем текущий слайд
    total_img[++idx].style.display = 'block'; // Инкрементируем индекс и показываем следующий слайд
    if (idx === total_img.length - 1) { // Убираем "правую" стрелку, если справа слайдов больше нет
      slide_right.style.display = 'none';
    }
}

//Аналогично, только для левой стрелки
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';
    }
}
 5
Author: user23398, 2016-01-08 03:35:08

Why create a bike if it was created a long time ago on the Internet you can find hundreds of sliders on a clean JavaScript. Example or search for a slider in pure JavaScript. 

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Слайдер на JavaScript.</title>
    <meta charset="utf-8">
</head>
<style>
#main {
    position:relative;
    margin: 100px auto;
    padding: 5px;
    width: 660px;
    height:360px;
    background-color: silver;
    border: 5px solid grey;
    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;
}
</style>
<script>
var slider = {
    slides:['ch01.jpg','ch02.jpg','ch03.jpg','ch04.jpg','ch05.jpg'],
    frame:0, // текущий кадр для отбражения - индекс картинки из массива
    set: function(image) { // установка нужного фона слайдеру
        document.getElementById("scr").style.backgroundImage = "url("+image+")";
    },
    init: function() { // запуск слайдера с картинкой с нулевым индексом
        this.set(this.slides[this.frame]);
    },
    left: function() { // крутим на один кадр влево
        this.frame--;
        if(this.frame < 0) this.frame = this.slides.length-1;
        this.set(this.slides[this.frame]);
    },
    right: function() { // крутим на один кадр вправо
        this.frame++;
        if(this.frame == this.slides.length) this.frame = 0;
        this.set(this.slides[this.frame]);      
    }
};
window.onload = function() { // запуск слайдера после загрузки документа
    slider.init();
    setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
        slider.right();
    },5000);
};
</script>
<body>
<div id="main">
    <button class="left" onclick="slider.left();"><</button>
    <div id="scr"></div>
    <button class="right" onclick="slider.right();">></button>
</div>  
</body>
</html>
 2
Author: , 2016-01-07 21:00:43