Показать сообщение отдельно
  #2 (permalink)  
Старый 31.12.2019, 19:30
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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
Ответить с цитированием