Как правильно задать $(this) в настройках плагина?

Question

[Расул Гитинов]

У меня на странице две абсолютно одинаковые секции Каталога, просто с разными типами товаров. Когда они не помещаются в видимую область, я включаю слайдер Sly, вот код:

// Catalog Carousel
if( $(window).width() <= 1200 ) {
	$('.catalog__wrap').each(function() {
		$(this).sly({
			dragHandle: true,
			dynamicHandle: true,
			elasticBounds: true,
			horizontal: true,
			itemSelector: '.catalogItem',
			mouseDragging: true,
			scrollBar: '.catalog__scrollbarLine',
			speed: 200,
			touchDragging: true
		});
	});
}

Прогнал через each, чтобы он отдельно подключился к каждой секции и слайдер работает. Но есть параметр scrollBar, в который я помещаю название класса, но он применяется только к скроллу в первом слайдере.

Как мне сделать так, чтобы он работал на обеих секциях?

Answer 1

[0xD34F]

scrollBar: '.catalog__scrollbarLine',

применяется только к скроллу в первом слайдере

Раз указали селектор, значит используется первый соответствующий ему элемент - конечно же, всегда один и тот же. Надо для каждого слайдера указывать его собственный .catalog__scrollbarLine, а значит их необходимо искать, отталкиваясь от элемента слайдера. Попробуйте указать $('.catalog__scrollbarLine', this).

Comments

[Расул Гитинов]

Там нет возможности так писать, выдает ошибку.

[0xD34F]

Что за ошибка? Код в песочницу.

[Расул Гитинов]

Я могу ссылку скинуть - petra.rasel.site

Он срабатывает при разрешении меньше 1200 пикселей

[0xD34F]

А-а-а, скролл отдельно от слайдера... ну тогда

$(this).closest('.catalog').find('.catalog__scrollbarLine')

[Расул Гитинов]

0xD34F, это все можно в параметр scrollBar вписывать разве?)

[0xD34F]

Можно.

[Расул Гитинов]

0xD34F, Да, помогло. Спасибо большое!

Answer 2

[Виктор Янышев]

each принимает несколько аргументов их и используй

Comments

[Расул Гитинов]

Можно пример пожалуйста?)

[Виктор Янышев]

ler arr = $(selector); // тут все элементы

arr.each(function(i, elem) {
// i это индекс, elem - это элемент из arr
 $(elem).sly();
});

[Расул Гитинов]

Виктор Янышев, Дело в том, что сами слайдеры оба работают, просто именно в той настройке скролла она выбирает только скролл из первого слайдера, а мне нужно чтобы у каждого по отдельности корректно работал скролл