Почему не работает слайдер?

Question

[Maximys781]

Привет всем,столкнулся с такой проблемой что перенес слайдер с одного места на свое,все правильно, а сам слайдер не работает.Скрипт исправен, ибо работает на первоначальном исходнике. Не работают именно вот кнопки, нажимаю на стрелки, а слайдер не работает.Заранее спасибо

<div id="gallery">
            <div class="photos">
                <img src="img/tai-mass.jpg" class="showed">
                <img src="img/swe-mass.jpg">
                <img src="img/hotstone-mass.png">
            </div>
            <div class="buttons">
                <input type="image"  src="img/arrow-left.png"   class="prev">
              
                <input type="image"  src="img/arrow-right.png" class="next">
            </div>

#gallery{
    width: 460px;
    margin: 0 auto;
    text-align: center;
}

#gallery .photos{
    position: relative;
    height: 670px;
}

#gallery .photos img{
    width: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
    margin-top: 200px;
}
#gallery .photos img.showed{
    opacity: 1;
}
.buttons{
    margin-right: 200px;

}

var btn_prev = document.querySelector('#gallery .buttons .prev');
var btn_next = document.querySelector('#gallery .buttons .next');

var images = document.querySelectorAll('#gallery .photos img');
var i = 0;

btn_prev.onclick = function(){
     images[i].className = '';
     i = i - 1; /* i-- */
     
     if(i < 0){
         i = images.length - 1;
     }
     
     images[i].className = 'showed';
}

btn_next.onclick = function(){
     images[i].className = '';
     i = i + 1; /* i++ */
     
     if(i >= images.length){
         i = 0;
     }
     
     images[i].className = 'showed';
}

Comments

[Милок Мурлыка]

У вас код некорректно вставился. Используйте тег code.

[Maximys781]

Исправил.

[amorphine]

Используйте готовые решения. Как пример, кастомизируемый до неузнаваемости bxslider.

[Maximys781]

amorphine: Спасибо,возьму на вооружение. Да и тут по сути то был готовый вариант, с одного вебинара забрал.

Answer 1

[Ridz]

в html пропущен закрывающий тег, сам скрипт запускать через DOMContentLoaded или ставить в конец страницы

Comments

[Maximys781]

Благодарю, помогло в конец страницы поставить.

Answer 2

[Immortal_pony]

Тэг "img" в четвертой строке должен быть вместо "images".

var images = document.querySelectorAll('#gallery .photos img');

Comments

[Maximys781]

Все равно не пашет.