Простой слайдер на javascript?

Question

[Денис]

Добрый день. Начинаю изучать js. Решил немного попрактиковаться и сразу сел на мель.
В качестве эксперимента, решил сделать простой слайдер.
И вот в чем суть вопроса.
Для наглядности приведу разметку:

<div class="card__heading-img">
  <img src="" class="active" />
  <img src=""/>
   <img src=""/>
</div>
<a href="#`" class="btn">btn</a>

Мне нужно, чтобы при клике на элемент (пусть этоу будет .btn) класс active удалялся на том изображении, на котором он сейчас есть и добавлялся к следующему. И это все имело вид цикла.

Алгоритм в голове есть.

Исхожу из следующего

var btn = document.querySelector('.click'); 
    var img = document.querySelectorAll('.card__heading-img img');
    var i = 0;

    if (img[i].classList.contains('active')) {
        img[i].classList.remove('active');

      } else {
        img[i].classList.add('active');
      }

      i ++ ;

       if (i == img.length) {
          i = 0;
      }

Это не работает. Если кто то поможет разобрать данный пример, буду очень признателен. Сейчас опыт очень важен, чтобы двигаться дальше

Comments

[Денис]

Я что-то не наблюдаю у вас в коде обработчика события click (addEventListener) на элемента .btn.

Answer 1

[Андрей]

var selector, elems, makeActive;

selector = '.card__heading-img img';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

Comments

[Денис]

Спасибо за вариант решения. Это работает) Буду разбираться

Answer 2

[Денис]

Вариант, предложенный Necromant1k , не сочетается с условием вашей задачи. Он будет работать при событии на самих изображениях, а не на кнопке. Если же вернутся к условию, то сделать можно было бы так:

var img = [].slice.call(document.querySelectorAll('.card__heading-img img'));
document.querySelector('.btn').addEventListener('click', function(e) {
    e.preventDefault();
    var curImg = img.filter(function(el) {
            return el.classList.contains('active');
        })[0],
        curIndx = img.indexOf(curImg),
        nextIndx = curIndx + 1 >= img.length ? 0 : curIndx + 1;

    curImg.classList.remove('active');
    img[nextIndx].classList.add('active');

}, false);

Answer 3

[trushka]

document.querySelector('.btn').addEventListener('click', function(e) {
    var last = document.querySelector('.card__heading-img .active');
    (document.querySelector('.card__heading-img .active+img') || document.querySelector('.card__heading-img img:first-child')).classList.add('active');
   last.classList.remove('active');
})

А кнопки лучше делать не ссылками, а специально для этого предназначенным тегом button. Потому как пользователь, например, попробовать открыть в новой вкладке может.. ну, и можно сэкономить на e.preventDefault(), так как клик по отфонарной кнопке вне формы (и даже внутри с указанным type="button") никакого действия не вызовет.. Мало того, можно временно отменить клик, установив кнопке аттрибут или свойство disabled, заодно, и css можно соответствующий задать..

Answer 4

[profesor08]

Вот вам наглядный пример без лишней магии и непонтяностей.
https://jsfiddle.net/profesor08/3kgc9ucj/

Comments

[Денис]

Огромное спасибо! Именно такой лаконичности и хотелось