Слайдер карусель
Всем привет. Есть конструктор слайдера-карусели, сейчас пытаюсь добавить точки и обозначение типа "01/04" в зависимости от текущего сайта. Направьте на правильный путь, начал с точками, но работает некорректно. Спасибо
<div class="carousel-container"> <div class="carousel-slides"> <img class="slide" id="lastClone" src="4.jpg"> <img class="slide" src="1.jpg"> <img class="slide" src="2.jpg"> <img class="slide" src="3.jpg"> <img class="slide" src="4.jpg"> <img class="slide" id="firstClone" src="1.jpg"> </div> <div class="btn-container"> <div class="btn" id="prev"> prev </div> <div class="btn" id="next"> next </div> </div> <div class="dots-container"> <div class="dot active"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> .carousel-container { display: block; width: 640px; height: 320px; margin: 0 auto; overflow: hidden; position: relative; } .carousel-slides { width: 100%; height: 100%; position: relative; top: 0; left: 0; } img { width: 100%; height: 100%; } .slide { position: absolute; top: 0; } .slide:nth-child(1) { left: 0; } .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%; } .btn-container { display: flex; justify-content: space-between; width: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba(255,138,24,0.5); } .btn { font-size: 24px; font-weight: 600; padding: 10px; cursor: pointer; } .dots-container { position: absolute; right: 20px; top: 80px; } .dot { width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%; margin: 20px; cursor: pointer; } .active { background-color: red; } //Создаем шаблон (function(){ //Для document и индекса создаем переменные var doc = document, index = 1; //Определяем конструктор слайдера var Slider = function() { //Определяем контейнер слайдера как свойство this.box = doc.querySelector('.carousel-container'); //Определяем контейнер-обертку слайдов как свойство this.slidesBox = doc.querySelector('.carousel-slides'); //Определяем непосредственно слайды как свойства this.slides = doc.querySelectorAll('.slide'); //Определяем кнопки как свойства this.btns = doc.querySelectorAll('.btn'); //Получаем значение ширины главного контейнера this.size = this.box.clientWidth; //Определяем точки this.dots = doc.querySelectorAll('.dot'); //Вызываем методы внутри контейнера this.position(); this.carousel(); this.currentSlide(); } //Создаем методы для слайдера //1. Метод для перемещения картинок на одну влево, чтобы первая картинка оказалась на своем месте Slider.prototype.position = function() { var size = this.size; this.slidesBox.style.transform = `translateX(${-index * size}px)`; }; //2. Метод переключения Slider.prototype.carousel = function() { var i, max = this.btns.length, that = this; for(i = 0; i < max; i += 1) { that.btns[i].addEventListener('click', Slider[that.btns[i].id].bind(null, that))//Slider[id кнопок, для вызова статических методов] bind - передача аргументов в статические функции, т.к. статические методы не имеют доступа в пространство конструктора, не видят его свойства } }; //3. Создаем статичные методы для кнопок Slider.prev = function(box) { box.slidesBox.style.transition = 'transform .3s ease-in-out'; var size = box.size; var dots = box.dots; index <= 0 ? false : index--; box.slidesBox.style.transform = `translateX(${-index * size}px)`; for(var i = 0; i < dots.length; i += 1) { dots[i].classList.remove('active'); } index <= 0 ? false : dots[index - 1].classList.add('active'); box.jump(); }; Slider.next = function(box) { box.slidesBox.style.transition = 'transform .3s ease-in-out'; var max = box.slides.length; var size = box.size; var dots = box.dots; index >= max - 1 ? false : index++; box.slidesBox.style.transform = `translateX(${-index * size}px)`; for(var i = 0; i < dots.length; i += 1) { dots[i].classList.remove('active'); } index >= max - 1 ? false : dots[index - 1].classList.add('active'); box.jump(); }; //Создаем метод для плавного перехода изображений Slider.prototype.jump = function() { var that = this; var size = this.size; this.slidesBox.addEventListener('transitionend', function() { that.slides[index].id === 'firstClone' ? index = 1 : index; that.slides[index].id === 'lastClone' ? index = that.slides.length - 2 : index; that.slidesBox.style.transition = 'none'; that.slidesBox.style.transform = `translateX(${-index * size}px)`; }); }; Slider.prototype.currentSlide = function() { var i, dots = this.dots; var that = this; for(i = 0; i < dots.length; i += 1) { dots[i].addEventListener('click', function() { that.carousel(); }); } }; //Вызываем конструктор new Slider(); })(); |
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 |
Спасибо. Работает.
Перешли, пожалуйста, в виде архива, CodePan лагает, не вижу код. |
Вложений: 1
Странно! А экспорт тоже не работает(правый нижний угол)?
|
Экспорта тоже не видно. Не знаю в чем дело...
По коду, все работает, только немного некорректно отображается, кнопки слетели, и 1 of 4 вроде.. Сейчас буду разбираться, спасибо огромное. Ну у тебя тут как-то более профессионально написано |
Malleys,
почему Math.mod = function mod(a, b) { return (a % b + b) % b; }; а не Math.mod = function mod(a, b) { return (a + b) % b; }; ? |
faceVB,
Обратные кавычки для строк это ES6, почему тогда остальной код в ES5, где class, let, const, for...of? |
Цитата:
|
faceVB,
Так не надо зацикливаться на одной проблеме. |
Согласен. Точки не могу внедрить без ошибок. Может подскажете, что не так с кодом в первом сообщении. Кстати, С Новым Годом!
|
Часовой пояс GMT +3, время: 03:26. |