Инициализация большого количества Slick slider с одним классом

Вопрос-ответ JavaScript
1

На сайте есть каталог товаров, каждый товар это slick slider (Syncing - т.е). У всех товаров задан один класс, через который я инициализирую слайдер, и вот в этом месте возникает проблема. Т.к. слайдер инициализируется по одному классу, то при листании одного слайдера, листаются все остальные. Помогите решить данную проблему пожалуйста.

2

Скорее всего код инициализции выглядит сейчас так:

$('.PRODUCT_CLASS_NAME').slick()

Попробуй заменить его на инициализацию слайдера для каждого продукта в отдельности:

$('.PRODUCT_CLASS_NAME').each(function (i, node) {
	$(node).slick()
})

Если инициализация слайдера выглядит иначе, скинь ее.

4

Дмитрий, подскажите пожалуйста как в сообщении вставить js? Что-то не могу найти )

5

Тут описано Как формулировать вопрос, подсвечивать код, благодарить

6

Моя инициализация -

$(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/

7

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,
			}
		}]
	});
})
8

Дмитрий, спасибо, все получилось )