На сайте есть каталог товаров, каждый товар это slick slider (Syncing - т.е). У всех товаров задан один класс, через который я инициализирую слайдер, и вот в этом месте возникает проблема. Т.к. слайдер инициализируется по одному классу, то при листании одного слайдера, листаются все остальные. Помогите решить данную проблему пожалуйста.
Скорее всего код инициализции выглядит сейчас так:
$('.PRODUCT_CLASS_NAME').slick()
Попробуй заменить его на инициализацию слайдера для каждого продукта в отдельности:
$('.PRODUCT_CLASS_NAME').each(function (i, node) {
$(node).slick()
})
Если инициализация слайдера выглядит иначе, скинь ее.
Дмитрий, подскажите пожалуйста как в сообщении вставить js? Что-то не могу найти )
Моя инициализация -
$(document).ready(function(){
$('.gyro-box-colorChoose-list-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.gyro-box-colorChoose-list-nav',
});
$('.gyro-box-colorChoose-list-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.gyro-box-colorChoose-list-for',
arrows: true,
centerPadding: '0',
focusOnSelect: true,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}
]
});
});
Пробовал через ваш вариант -
$(document).ready(function(){
$('.gyro-box-colorChoose-list-for').each(function (i, node) {
$(node).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.gyro-box-colorChoose-list-nav',
});
});
$('.gyro-box-colorChoose-list-nav').each(function (i, node) {
$(node).slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.gyro-box-colorChoose-list-for',
arrows: true,
centerPadding: '0',
focusOnSelect: true,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}
]
});
});
});
Ничего не помогло. Вот собственно сам сайт http://gyro72.ru/
asNavFor: '.gyro-box-colorChoose-list-nav',
вот эта строка нужна чтобы “синхронизировать” два слайдера. Прокручивается один (который инициализируется), изменится состояние того, который указан в классе свойства asNavFor
.
Чтобы заработало, нужно расставить уникальные классы для каждой пары слайдеров и использовать уникальные классы при инициализации. Если есть возможность расставить их на сервере - лучше делать это на сервере. Ниже решение (в котором очень жирное предположение что каждый узел .gyro-box-colorChoose-list-nav
имеет соответствующий узел .gyro-box-colorChoose-list-for
рядом (т.е. пятому .gyro-box-colorChoose-list-nav
будет соответствовать пятый .gyro-box-colorChoose-list-for
). Сначала расставляются уникальные классы, потом они используются при инициализации связаных каруселей.
var navNodes = $('.gyro-box-colorChoose-list-nav')
$('.gyro-box-colorChoose-list-for').each(function(i, node) {
var listNodeUniqueClass = 'gyro-box-colorChoose-list-for-' + i
$(node).addClass(listNodeUniqueClass)
var navNodeUniqueClass = 'gyro-box-colorChoose-list-nav-' + i
navNodes.eq(i).addClass(navNodeUniqueClass)
var listSelector = '.' + listNodeUniqueClass
var navSelector = '.' + navNodeUniqueClass
$(listSelector).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: navSelector,
});
$(navSelector).slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: listSelector,
arrows: true,
centerPadding: '0',
focusOnSelect: true,
responsive: [{
breakpoint: 769,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
}, {
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}]
});
})
Дмитрий, спасибо, все получилось )