3

У кого-нибудь есть простой слайдер на чистом JavaScript? Поделитесь пожалуйста.
Пытаюсь сделать свой, но пока сложновато. Хочу взять за основу готовое решение и разобраться на нем.

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';
}

полный код https://jsfiddle.net/lilubanana/srkxLkou/

2
  • Да что же в нем сложного? Есть переменная, хранит первоначальное значение. При клике влево или вправо делается инкремент или декреммент. Если достигается края и щелкается еще раз стрелка того же направления, то счетик сбрасывается..... всё..... если авто слайдер - то вешается setInterval к примеру 7 янв 2016 в 20:54
  • мой слайдер сейчас на этой стадии jsfiddle.net/lilubanana/srkxLkou из вашего комментария ничего не понятно
    – siberian
    7 янв 2016 в 20:57

2 ответа 2

6

Подправил ваш пример.

Направление мысли у вас было правильное. Нужно было только добавить оставшуюся логику для переключения картинок. Привожу код с комментариями к тому, что я добавил:

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';
    }
}
4
  • спасибо большое! все предельно понятно
    – siberian
    8 янв 2016 в 6:41
  • я хочу добавить анимацию с помощью transition, чтобы изображения плавно сменяли друг друга. знаю как это добавить для :hover. но как применить это к изображению, если функция вызывается по клику на другой элемент? и еще вместо добавления стилей я сделала добавление классов, но теперь слайдер налево не работает. вот так jsfiddle.net/lilubanana/f4omfqsn/1 . наверное надо как-то удалять класс?
    – siberian
    9 янв 2016 в 15:43
  • @MarinaVoronova, вот. Удалять класс нужно с помощью classList.remove(). Там несколько хаков: transform: translate(-50%, 0) - двигаем картинку на 50% от своей ширины влево (убери и увидишь, зачем я это сделал). Анимацию я сделал через left и position: absolute, т.к. с display анимации не работают. Скорость картинок разная потому, что ширина их разная. Нужно либо все картинки одинаковой ширины делать, либо для каждой подбирать свой left. Обрати внимание, что скрол снизу появился. Нужно зафиксировать ширину слайдера и добавить overflow: hidden.
    – user23398
    10 янв 2016 в 2:03
  • спасибо большое! анимацию я по другому представляю, но это я уже сама поразбираюсь.
    – siberian
    10 янв 2016 в 12:11
1

Для чего создавать велосипед, если его давно создали в интернете можно найти сотни слайдеров на чистом JavaScript. Пример или ищите по запросу - слайдер на чистом 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>
5
  • спасибо. находила только с jquery
    – siberian
    7 янв 2016 в 21:04
  • если я хочу картинки подключать из html я могу просто убрать этот код? slides:['ch01.jpg','ch02.jpg','ch03.jpg','ch04.jpg','ch05.jpg'], надо что-то еще менять?
    – siberian
    7 янв 2016 в 21:10
  • @MarinaVoronova Если вам этот ответ был полезен поставьте галочку напротив ответа. Это слайдер очень простенький, если вам нужен более функциональный, нужно подключать библиотеку jquery и пользоваться каким-то плагином которых в интернете полно.
    – user185375
    7 янв 2016 в 21:18
  • у меня не работает, или я что-то не так делаю. и это очень странный способ подключения изображений
    – siberian
    7 янв 2016 в 21:25
  • 3
    Велосипед нужно повторить для того чтобы разобраться как это работает. Вас попросили помочь разобраться в коде, а не научить гуглом пользоваться. А если вы вставляете кусок непонятного кода только ради галочки, то лучше не отвечайте вообще.
    – user23398
    8 янв 2016 в 15:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.