Stop slides scrolling

var formSlider = document.querySelector('#form-slider'), divSlideArray = formSlider.querySelectorAll('.slide'); var divSliderArrows = document.querySelector('#slider-arrows'), divArrowLeft = divSliderArrows.querySelector('.arrow-left'), divArrowRight = divSliderArrows.querySelector('.arrow-right'); var currentSlide = 0; divArrowLeft.addEventListener('click', function () { if (currentSlide > 0) { divArrowRight.style.setProperty('display', 'block', ''); divSlideArray[currentSlide].style.setProperty('display', 'none', ''); divSlideArray[--currentSlide].style.setProperty('display', 'block', ''); if (currentSlide == 0) divArrowLeft.style.setProperty('display', 'none', ''); } }); divArrowRight.addEventListener('click', function () { if (currentSlide < divSlideArray.length - 1) { divArrowLeft.style.setProperty('display', 'block', ''); divSlideArray[currentSlide].style.setProperty('display', 'none', ''); divSlideArray[++currentSlide].style.setProperty('display', 'block', ''); if (currentSlide == divSlideArray.length - 1) divArrowRight.style.setProperty('display', 'none', ''); } }); 
 input[type='radio'], label { cursor: pointer; height: 22px; width: 22px; background: #494949; } .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: 0 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); } .heading { font-size: 28px; padding: 4% 6%; display: inline-flex; } .heading i { padding-right: 10px; color: #4991e3; font-size: 22px; } .num { font-size: 14px; padding-left: 100px; } .first { border-bottom: 5px solid #C9C9C9; } .radio { padding: 20px; font-size: 22px; padding: 4% 6%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="wrap-slider"> <form id="form-slider" action="" method="post"> <div class="slide"> <div class="heading first"> <i class="fa fa-file-text-o" aria-hidden="true"></i> <p>Пройди тест за 2 минуты, и узнай как удвоить поток клиентов в свой бизенс! Чек-лист по маркетингу стоимостью 20.000 р в подарок</p> <div class="num">1/6</div> </div> <div class="radio"> <p>Ваш бизнес продвигается с помощью сети интернет ?</p> <p> <input type="radio" name="radio1" id="answer1" value="answer1"> <label for="answer1">&nbsp&nbspДа</label> </p> <p> <input type="radio" name="radio1" id="answer2" value="answer2"> <label for="answer2">&nbsp&nbspНет</label> </p> </div> <div id="slider-arrows"> <!--<div class="arrow-left">Назад</div>--> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <p>Вопрос 2</p> <p>Ответ <input type="radio" name="radio2" value="answer1"></p> <p>Ответ <input type="radio" name="radio2" value="answer2"></p> <p>Ответ <input type="radio" name="radio2" value="answer3"></p> <div id="slider-arrows"> <div class="arrow-left">Назад</div> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <p>Вопрос 3</p> <p>Ответ <input type="radio" name="radio3" value="answer1"></p> <p>Ответ <input type="radio" name="radio3" value="answer2"></p> <p>Ответ <input type="radio" name="radio3" value="answer3"></p> </div> <div class="slide"> <p>Конец</p> <p><input type="text" name="name" placeholder="Введите Ваше имя"></p> <p><input type="text" name="phone" id="phone" placeholder="Введите Ваш номер"></p> <p><input type="email" name="email" placeholder="Введите Ваше мыло"></p> <p><input type="submit" name="save"></p> </div> </form> </div> </div> </section>

1 answer 1

 var formSlider = document.querySelector('#form-slider'), divSlideArray = document.querySelectorAll('.slide'); var divSliderArrows = document.querySelector('#slider-arrows'), divArrowLeft = document.querySelector('.arrow-left'), divArrowRight = document.querySelector('.arrow-right'); var currentSlide = 0; divArrowLeft.addEventListener('click', function () { if (currentSlide > 0) { divArrowRight.style.setProperty('display', 'block', ''); divSlideArray[currentSlide].style.setProperty('display', 'none', ''); divSlideArray[--currentSlide].style.setProperty('display', 'block', ''); if (currentSlide == 0) divArrowLeft.style.setProperty('display', 'none', ''); } }); divArrowRight.addEventListener('click', function () { if (currentSlide < divSlideArray.length - 1) { divArrowLeft.style.setProperty('display', 'block', ''); divSlideArray[currentSlide].style.setProperty('display', 'none', ''); divSlideArray[++currentSlide].style.setProperty('display', 'block', ''); if (currentSlide == divSlideArray.length - 1) divArrowRight.style.setProperty('display', 'none', ''); } }); 
 input[type='radio'], label { cursor: pointer; height: 22px; width: 22px; background: #494949; } .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: 0 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); } .heading { font-size: 28px; padding: 4% 6%; display: inline-flex; } .heading i { padding-right: 10px; color: #4991e3; font-size: 22px; } .num { font-size: 14px; padding-left: 100px; } .first { border-bottom: 5px solid #C9C9C9; } .radio { padding: 20px; font-size: 22px; padding: 4% 6%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="wrap-slider"> <form id="form-slider" action="" method="post"> <div class="slide"> <div class="heading first"> <i class="fa fa-file-text-o" aria-hidden="true"></i> <p>Пройди тест за 2 минуты, и узнай как удвоить поток клиентов в свой бизенс! Чек-лист по маркетингу стоимостью 20.000 р в подарок</p> <div class="num">1/6</div> </div> <div class="radio"> <p>Ваш бизнес продвигается с помощью сети интернет ?</p> <p> <input type="radio" name="radio1" id="answer1" value="answer1"> <label for="answer1">&nbsp&nbspДа</label> </p> <p> <input type="radio" name="radio1" id="answer2" value="answer2"> <label for="answer2">&nbsp&nbspНет</label> </p> </div> <div id="slider-arrows"> <!--<div class="arrow-left">Назад</div>--> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <p>Вопрос 2</p> <p>Ответ <input type="radio" name="radio2" value="answer1"></p> <p>Ответ <input type="radio" name="radio2" value="answer2"></p> <p>Ответ <input type="radio" name="radio2" value="answer3"></p> <div id="slider-arrows"> <div class="arrow-left">Назад</div> <div class="arrow-right">Вперед</div> </div> </div> <div class="slide"> <p>Вопрос 3</p> <p>Ответ <input type="radio" name="radio3" value="answer1"></p> <p>Ответ <input type="radio" name="radio3" value="answer2"></p> <p>Ответ <input type="radio" name="radio3" value="answer3"></p> </div> <div class="slide"> <p>Конец</p> <p><input type="text" name="name" placeholder="Введите Ваше имя"></p> <p><input type="text" name="phone" id="phone" placeholder="Введите Ваш номер"></p> <p><input type="email" name="email" placeholder="Введите Ваше мыло"></p> <p><input type="submit" name="save"></p> </div> </form> </div> </div> </section>