Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.12.2019, 14:25
Новичок на форуме
Отправить личное сообщение для faceVB Посмотреть профиль Найти все сообщения от faceVB
 
Регистрация: 31.12.2019
Сообщений: 5

Слайдер карусель
Всем привет. Есть конструктор слайдера-карусели, сейчас пытаюсь добавить точки и обозначение типа "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();

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

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
Ответить с цитированием
  #3 (permalink)  
Старый 31.12.2019, 18:38
Новичок на форуме
Отправить личное сообщение для faceVB Посмотреть профиль Найти все сообщения от faceVB
 
Регистрация: 31.12.2019
Сообщений: 5

Спасибо. Работает.
Перешли, пожалуйста, в виде архива, CodePan лагает, не вижу код.
Ответить с цитированием
  #4 (permalink)  
Старый 31.12.2019, 18:44
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Странно! А экспорт тоже не работает(правый нижний угол)?
Вложения:
Тип файла: zip CodePen_Export_YzPrEwP.zip (5.3 Кб, 2 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 31.12.2019, 19:05
Новичок на форуме
Отправить личное сообщение для faceVB Посмотреть профиль Найти все сообщения от faceVB
 
Регистрация: 31.12.2019
Сообщений: 5

Экспорта тоже не видно. Не знаю в чем дело...
По коду, все работает, только немного некорректно отображается, кнопки слетели, и 1 of 4 вроде..
Сейчас буду разбираться, спасибо огромное. Ну у тебя тут как-то более профессионально написано
Ответить с цитированием
  #6 (permalink)  
Старый 31.12.2019, 19:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Malleys,
почему
Math.mod = function mod(a, b) {
		return (a % b + b) % b;
	};

а не
Math.mod = function mod(a, b) {
		return (a + b) % b;
	};


?
Ответить с цитированием
  #7 (permalink)  
Старый 31.12.2019, 20:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,610

faceVB,
Обратные кавычки для строк это ES6, почему тогда остальной код в ES5, где class, let, const, for...of?
Ответить с цитированием
  #8 (permalink)  
Старый 01.01.2020, 09:04
Новичок на форуме
Отправить личное сообщение для faceVB Посмотреть профиль Найти все сообщения от faceVB
 
Регистрация: 31.12.2019
Сообщений: 5

Сообщение от Rise Посмотреть сообщение
faceVB,
Обратные кавычки для строк это ES6, почему тогда остальной код в ES5, где class, let, const, for...of?
Ну я думаю, не в этом проблема. Все работало с ними.
Ответить с цитированием
  #9 (permalink)  
Старый 01.01.2020, 10:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,610

faceVB,
Так не надо зацикливаться на одной проблеме.
Ответить с цитированием
  #10 (permalink)  
Старый 01.01.2020, 11:22
Новичок на форуме
Отправить личное сообщение для faceVB Посмотреть профиль Найти все сообщения от faceVB
 
Регистрация: 31.12.2019
Сообщений: 5

Согласен. Точки не могу внедрить без ошибок. Может подскажете, что не так с кодом в первом сообщении. Кстати, С Новым Годом!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер карусель TheSanches Общие вопросы Javascript 6 02.03.2019 18:33
вкладки и слайдер slicks ildar94 Элементы интерфейса 6 16.01.2018 14:29
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Слайдер со сдвигом выбранной картинки november Общие вопросы Javascript 4 27.08.2015 01:04
Слайдер - карусель блоков (помогите пожалуйста) Viktor.Poberezhniy Общие вопросы Javascript 3 22.07.2014 11:46