Как сделать бесконечное число слайдеров на странице?

Question

[Игорь Пушкарский]

Юзаю Swiper slider, и возникла необходимость сделать неограниченное количество слайдеров. Вроде все работает, но вот не задача, инициализация делается вот так:

var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    preloadImages: false,
    // Enable lazy loading
    lazyLoading: true
});

Естественно, когда я нажимаю на любую стрелку перелистывания слайда например swiper-button-next, у меня перелистываются все слайдеры сразу. Проблема в том, что если выводить неограниченное количество слайдеров, придется в каждом слайдере писать свой класс, и несколько раз дублировать js.

Мне кажется, как-то это не хорошо.

Как можно это упростить?

Comments

[damogingcidanrana]

Если нужно несколько независимых слайдеров, можно поместить их в индивидуальные блоки и задавать так.
var swiper = new Swiper('.own-class .swiper-container',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
preloadImages: false,
// Enable lazy loading
lazyLoading: true
});
var swiper = new Swiper('.own-class-2 .swiper-container',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
preloadImages: false,
// Enable lazy loading
lazyLoading: true
}); и тд и они не будут влиять друг на друга, можно также записать все эти классы в переменную и перебрать циклом, если не хочешь много раз дублировать конструкцию и она одинаковая.

[Алексей Пархоменко]

Как Вы решили данную проблему? Подскажите, пожалуйста.

Answer 1

[Valery]

В последнем проекте использовал такой код для вывода множества одинаковых каруселей:

var tileSlider = $('.tile-slider');
tileSlider.each(function(){
    var mySwiper = new Swiper(this, {
        loop: true,
        nextButton: $(this).parent().find('.tile-slider-next')[0],
        prevButton: $(this).parent().find('.tile-slider-prev')[0]
    });
});

Comments

[Алексей Пархоменко]

Подскажите, вот это
var tileSlider = $('.tile-slider');
tileSlider.each(function(){

Откуда и что такое? Не воспринимает моя страничка.
Подробней могли бы вы написать, пожалуйста, что к чему?!

[Valery]

Алексей Пархоменко: каждый слайдер в данном случае имеет класс .tile-slider, а tileSlider — обычная переменная, в которой хранится селектор.
Через .each() мы перебираем все слайдеры с классом .tile-slider и подключаем скрипт.
Без переменной код выглядит так:

$('.tile-slider').each(function(){
    var mySwiper = new Swiper(this, {
        loop: true,
        nextButton: $(this).parent().find('.tile-slider-next')[0],
        prevButton: $(this).parent().find('.tile-slider-prev')[0]
    });
});

[Алексей Пархоменко]

Valery: Я так понимаю, уникальные настройки для каждого слайдера сделать не получиться?

[Valery]

Алексей Пархоменко: нет, данный код предназначен для вызова одинаковых слайдеров с одинаковыми параметрами. Если слайдеру нужно указать другие параметры, нужно подключать слайдер к другому селектору

[Артём]

Valery: Что делать,навигационное меню теперь не отображается

Answer 2

[Павел Гоголинский]

перебрать их все $('.swiper-container').each(index, element)и подключить слайдер к каждому отдельно

Comments

[Игорь Пушкарский]

Пробовал такую конструкцию но что то не работает. Можете описать подробнее что должно быть внутри функции?

[Павел Гоголинский]

$('.swiper-container').each(function(index, element) {
    new Swiper($(element).attr('id'), {
        nextButton: $(element).attr('id') + '> .swiper-button-next',
        prevButton: $(element).attr('id') + '> .swiper-button-prev',
        loop: true,
        preloadImages: false,
        // Enable lazy loading
        lazyLoading: true
});
});

Каждому swiper-container должен генерится свой id. Потом пробегаемся по всем контейнерам, по их id вешаем на них плагин, а в кнопках прописываем относительные селекторы

[Игорь Пушкарский]

Сделал но почему то все равно не работает, хз. Остановился на варианте Valery

[Аброр Джейки]

Игорь Пушкарский: я везде использую DATA атрибуты, класс у всех один, но каждый слайдер различается DATA атрибутами

Answer 3

[Сергей Софьичев]

var gallerySlider = new Swiper ('.gallery-slider', {
	direction: 'horizontal',
	loop: true,
	slidesPerView: 4,
	observer: true,
	onInit: function(swiper){
		var galleryID= swiper.container[0].id;
		swiper.nextButton = $('#'+galleryID+' .gallery-button-next');
		swiper.prevButton = $('#'+galleryID+' .gallery-button-prev');
		swiper.nextButton.click(function(){
			swiper.slideNext();
		});
		swiper.prevButton.click(function(){
			swiper.slidePrev();
		});
	}
});