img {
width: 100%;
height: 100%;
object-fit: cover; /* нужно указать, чтобы не было «искажения» картинок */
}
/* ... удивительно, а если будет 104 картинки? */
.slide:nth-child(2) {
left: 100%;
}
.slide:nth-child(3) {
left: 200%;
}
.slide:nth-child(4) {
left: 300%;
}
.slide:nth-child(5) {
left: 400%;
}
.slide:nth-child(6) {
left: 500%;
}
Вам нужно избавиться от повтора в исходном коде… удалите…
<img class="slide" id="lastClone" src="4.jpg">
<img class="slide" id="firstClone" src="1.jpg">
Это вообще бессмысленно...
//Для document и индекса создаем переменные
var doc = document,
index = 1;
Должно ведь быть описано внутри класса…
//Вызываем конструктор
new Slider();
А если ещё раз вызвать, то как будет другой экземпляр работать?
Короче, вот сделал кучу исправлений... не буду их описывать, сравни, если надо, но если что-то не понятно, то можно ещё спросить
в этой же теме!
https://codepen.io/Malleys/pen/YzPrEwP