Почему кнопка "назад" не работает?
var container = document.querySelector('.d-flex');
var items = document.querySelectorAll('.d-flex .item');
var itemsCount = items.length;
var itemWidth = document.querySelector('.d-flex .item').offsetWidth;
var nextLink = document.querySelector('#nextSlide');
var prevLink = document.querySelector('#prevSlide');
var slidesToScroll = 1;
var slidesToShow = 4;
var currentIndex = 0;
var indexDiv = document.querySelector('#index');
var autoSlide = () => setTimeout(nextSlide, 3000);
var nextSlide = function(){
// container.dispatchEvent(new CustomEvent("t.slide"));
var cloned = items[currentIndex];
function rc(){
items[currentIndex].remove();
container.appendChild(cloned);
currentIndex++;
}
function addm(){
items[currentIndex].style.marginLeft = -itemWidth;
setTimeout(function(){
rc()
},300)
}
addm()
if (currentIndex >= itemsCount-1){
currentIndex = 0;
}
indexDiv.innerText = currentIndex;
}
var prevSlide = function(){
if(currentIndex === 1){
return;
}
currentIndex--;
var ml = parseInt(items[0].style.marginLeft);
items[currentIndex-1].style.marginLeft = +ml+itemWidth;
}
nextLink.addEventListener("click", nextSlide);
prevLink.addEventListener("click", prevSlide);body{
margin:0;
}
.d-flex{
display:flex;
padding:20px;
box-sizing:border-box;
overflow:hidden;
justify-content:space-between;
}
.d-flex .item{
justify-content:center;
flex: 1 0 25%;
padding:10px;
order:-1;
transition:margin 0.2s ease-out;
box-sizing:border-box;
}
.d-flex .item span{
width:100%;
display:flex;
border:2px solid #999;
background:#ccc;
height:100px;
font-size:60px;
color:rgba(0,0,0,0.2);
font-family:"Open Sans";
text-transform:uppercase;
font-weight:bold;
align-items:center;
box-sizing:border-box;
justify-content:center;
border-radius:5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="index">0</div>
<div class="d-flex">
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Астрахань 2998 руб. " href="flights/?origin_iata=MOW&destination_iata=ASF&depart_date=2021-11-25&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Астрахань</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/DP.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2998 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Астрахань" src="/static/cities/220x150/ASF.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Брянск 3141 руб. " href="/flights/?origin_iata=MOW&destination_iata=BZK&depart_date=2021-08-01&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Брянск</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/S7.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 3141 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Брянск" src="/static/cities/220x150/BZK.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Ярославль 3000 руб. " href="/flights/?origin_iata=MOW&destination_iata=IAR&depart_date=2021-07-19&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Ярославль</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/SU.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 3000 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Ярославль" src="/static/cities/220x150/IAR.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Ижевск 2998 руб. " href="/flights/?origin_iata=MOW&destination_iata=IJK&depart_date=2021-11-01&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Ижевск</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/DP.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2998 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Ижевск" src="/static/cities/220x150/IJK.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Калининград 2920 руб. " href="/flights/?origin_iata=MOW&destination_iata=KGD&depart_date=2021-10-09&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Калининград</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/UT.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2920 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Калининград" src="/static/cities/220x150/KGD.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Краснодар 2998 руб. " href="/flights/?origin_iata=MOW&destination_iata=KRR&depart_date=2021-11-15&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Краснодар</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/DP.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2998 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Краснодар" src="/static/cities/220x150/KRR.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Санкт-Петербург 2990 руб. " href="/flights/?origin_iata=MOW&destination_iata=LED&depart_date=2021-08-16&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Санкт-Петербург</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/UT.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2990 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Санкт-Петербург" src="/static/cities/220x150/LED.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Лондон 2924 руб. " href="/flights/?origin_iata=MOW&destination_iata=LON&depart_date=2021-10-18&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Лондон</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/W9.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2924 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Лондон" src="/static/cities/220x150/LON.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Владикавказ 2998 руб. " href="/flights/?origin_iata=MOW&destination_iata=OGZ&depart_date=2021-11-15&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Владикавказ</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/DP.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2998 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Владикавказ" src="/static/cities/220x150/OGZ.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Псков 2960 руб. " href="/flights/?origin_iata=MOW&destination_iata=PKV&depart_date=2021-09-06&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Псков</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/A4.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2960 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Псков" src="/static/cities/220x150/PKV.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
<div class="item"><div class="name"><a class="deshevo" rel="nofollow" title="Москва Ульяновск 2998 руб. " href="/flights/?origin_iata=MOW&destination_iata=ULY&depart_date=2021-08-31&adults=1&children=0&infants=0&trip_class=0&marker=87111&with_request=true" target="_blank"><div class="col span_1_of_3">
<div class="over"></div>
<div class="ima">
<div style="width: 100%; line-height: 1; margin-left:5px;position: relative; z-index: 99999; padding: 0px; float: none; display: inline-block;" class="titles"><span class="tow">Москва - <br>Ульяновск</span></div> <p><img style=" padding: 2px;background: white; " width="66" height="38" src="/88/48/DP.jpg" class="lazyload air"></p>
<span style="left: 5px;line-height: 1;color:#fce68c!important;font-size: 20px!important;border-radius: 5px;padding-left: 5px;top: 100px;width:160px;text-align: center;" class="titles">Билеты от 2998 р.</span>
</div>
<img width="220" height="220" alt="купить авиабилет Москва Ульяновск" src="/static/cities/220x150/ULY.webp" class="lazyload content-image"><p></p>
</div></a></div></div>
</div>
<button id="prevSlide" style="position: relative; left: 8px;cursor:pointer;padding: 5px; background-image: radial-gradient(circle farthest-corner at 10% 20%, #c2d7ec 0, #ffffff 90%); border: 1px solid #999; border-radius: 10px 0px 0px 10px;margin-left:20px;margin-top: 10px; ">Назад</button>
<button id="nextSlide" style="cursor:pointer;padding: 5px; background-image: radial-gradient(circle farthest-corner at 10% 20%, #ffffff 0, #c2d7ec 90%); border: 1px solid #999; border-radius: 0px 10px 10px 0px; ">Вперед</button>Ответы (1 шт):
Автор решения: Александр Рогонов
→ Ссылка
Научитесь пользоваться консолью. Это не сложно. При нажатии на кнопку там видно ошибку Uncaught TypeError: Cannot read property 'style' of undefined
items[currentIndex-1] undefined