I can not figure out the slider, I took the source I do not remember where, I redid it for myself, it seemed to work, I cut the button back - I died, nothing was decided by the return of the button

var divSlideArray = document.querySelectorAll('.slide'), divArrowRight = document.querySelector('.arrow-right'), currentSlide = 0; divArrowRight.addEventListener('click', function() divSlideArray[currentSlide].style.setProperty('display', 'none', ''); divSlideArray[++currentSlide].style.setProperty('display', 'block', ''); if (currentSlide == divSlideArray.length - 1) { divArrowRight.style.setProperty('display', 'none', ''); } }); 
 .wrap-slider { position: relative; } #form-slider { width: auto; } #form-slider .slide { margin: 15% auto; overflow: hidden; } #form-slider .slide:first-child~.slide { display: none; } #slider-arrows [class^="arrow"] { user-select: none; cursor: pointer; background: #4991e3; color: #fff; font-size: 14px; border-radius: 30px; padding: 15px 60px; margin: -20px 40px 40px; font-weight: 700; } #slider-arrows .arrow-left { display: none; left: 0; } #slider-arrows .arrow-right { float: right; } .slide { color: #fff; background: #494949; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } 
 <div class="wrap-slider"> <form id="form-slider" action="" method="post"> <div class="slide"> <img src="http://via.placeholder.com/250x250/ff00ff/000000" class="pic1"> <div id="slider-arrows"> <!--<div class="arrow-left">Назад</div>--> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <img src="http://via.placeholder.com/250x250/000000/ff00ff" class="pic1"> <div id="slider-arrows"> <!--<div class="arrow-left">Назад</div>--> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <div class="radio"> <p>Ваше имя<br><input type="text" name="name" placeholder="Ваше имя"></p> <p>Ваш email<br><input type="email" name="email" placeholder="Ваш email"></p> <p>Ваш телефон<br><input type="text" name="phone" id="phone" placeholder="+7XXXXXXXXXX"></p> <p><input type="submit" name="save"></p> </div> </div> </form> </div>

    1 answer 1

    I can not figure out the slider, I took the source I do not remember where, I redid it for myself, it seemed to work, I cut the button back - I died, nothing was decided by the return of the button

    Missed the parenthesis in if .

     var divSlideArray = document.querySelectorAll('.slide'), divArrowRight = document.querySelectorAll('.arrow-right'), currentSlide = 0; //---------------------------------------------------------------- // Проходим по массиву divArrowRight.forEach(function(e) { // Вешаем событие e.addEventListener('click', function(e) { divSlideArray[currentSlide].style.setProperty('display', 'none', ''); divSlideArray[++currentSlide].style.setProperty('display', 'block', ''); //---------------------------------------------------------------- if (currentSlide == divSlideArray.length - 1) { /// <------ Missing { e.target.style.display = 'none'; } }); }) 
     .wrap-slider { position: relative; } #form-slider { width: auto; } #form-slider .slide { margin: 15% auto; overflow: hidden; } #form-slider .slide:first-child~.slide { display: none; } #slider-arrows [class^="arrow"] { user-select: none; display: inline-block; /******************** added ********************/ cursor: pointer; background: #4991e3; color: #fff; font-size: 14px; border-radius: 30px; padding: 15px 60px; margin: -20px 40px 40px; font-weight: 700; } #slider-arrows .arrow-left { display: none; left: 0; } #slider-arrows .arrow-right { float: right; } .slide { color: #fff; background: #494949; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /******************** added ********************/ .show { display: block; } .hide { display: none; } 
     <div class="wrap-slider"> <form id="form-slider" action="" method="post"> <div class="slide"> <img src="//picsum.photos/200/300" class="pic1"> <div id="slider-arrows"> <!--<div class="arrow-left">Назад</div>--> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <img src="//picsum.photos/200/301" class="pic1"> <div id="slider-arrows"> <!-- <div class="arrow-left">Назад</div> --> <div class="arrow-right">Вперед</div> </div> </div> <div class="arrow-right">Вперед</div> <div class="slide"> <div class="radio"> <p>Ваше имя<br><input type="text" name="name" placeholder="Ваше имя"></p> <p>Ваш email<br><input type="email" name="email" placeholder="Ваш email"></p> <p>Ваш телефон<br><input type="text" name="phone" id="phone" placeholder="+7XXXXXXXXXX"></p> <p><input type="submit" name="save"></p> </div> </div> </form> </div>

    • It helped, but it’s not going further than 1 slide - Dvst8d
    • @ Dvst8d updated, if at all correctly understood you, comments in the code. - Kosta B.
    • No, this is not much wrong. You made a picture change, which does not suit me a lot, at first a quiz was made, and should be scrolling through, but for more specificity of the question you saw a large amount of code. Here is the whole: jsfiddle.net/uxg4dktq - Dvst8d
    • @ Dvst8d you have a few buttons Forward, and you only hang events on the first one, so it turns out that the slides are not going further than the first one. - Kosta B.
    • How to fix it? Record function and onclick nailed to all buttons? Or is there a better option? - Dvst8d