Делаю слайдер с прокруткой. Поставил за функцией счетчик и прописал в функции чтобы при каждом нажатии на кнопку Next число в нем уменьшалось на 800px . Срабатывает только один раз ,хотя при выводе значения в счетчика в консоль показывает что он отрабатывает нормально ,но почему то в margin-left значение записывается только один раз
<style>
.slider_five{
width: 800px;
overflow: hidden;
}
.slider_five_box{
/* width: calc(800 * 4); */
height: 500px;
display: flex;
margin-left: 0;
}
.navigation_five{
display: flex;
justify-content: space-between;
width: ;
font-size: 40px;
cursor: pointer;
width: 100%;
}
</style>
<h2>ПРОКРУТКА СЛАЙДОВ</h2>
<div class="slider_five">
<div class="slider_five_box">
<img src="https://i2.wp.com/alextheatrestk.com.au/wp-content/uploads/2019/08/800-x-500.jpg?fit=800%2C500&ssl=1" alt="" class="slide_five">
<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/19/2019/07/cleaner-wax-works-well-on-dirty-and-ligh_325551132_578263542-800x-500.jpg" alt="" class="slide_five">
<img src="http://www.passenger6a.ru/wp-content/uploads/2016/05/001_DESTACADAa-800x500.jpg" alt="" class="slide_five">
<img src="http://innotechnews.com/images/gadgets/Huawei/honor-view-20/honor-view-20.jpg" alt="" class="slide_five">
</div>
<div class="navigation_five">
<div class="prev_five">Prev</div>
<div class="next_five">Next</div>
</div>
</div>
<script>
var count_width = 0;
document.querySelector('.next_five').onclick = function(){
count_width += -800;
console.log(count_width);
var slider_five_box = document.querySelector('.slider_five_box');
slider_five_box.style.marginLeft += count_width + 'px';
}
</script>
