Почему Skick slider не активируется цыклом?

Question

[Андрей]

document.addEventListener('DOMContentLoaded', () => {

    
  $(document).ready(function(){
    let sliderUniqum = '.slider-uniqum';
    let classes = [];
    let i = 0;

    const sliders = document.querySelectorAll('.slick-super-slider');

    sliders.forEach(item => {
      i++;
      sliderUniqum = sliderUniqum + i;
      item.classList.add(sliderUniqum)
      classes.push(sliderUniqum)
    });

    $(document).ready(function(){
    
      classes.forEach(cssClss => {
        $(cssClss).slick({
            slidesToShow: 3,
            slidesToScroll: 3,
            prevArrow: false,
            nextArrow: $('.next-slide'),
        });
      })
    });
  });
});

Создается переменная строка
создается массив куда будут суваться уникальные строки
создается счетчик i для создания уникальных строка
Получаем по селектору все слайдеры
форычем генерируем уникальные строки и добавляем класс слайдеру
пушим уникальную строку в массив

Проходимся форычом по массиву и пытаемся инициализировать слайдер, но он не инициализируется, помогите

Comments

[imko]

А зачем слайдерам уникальный класс если они все одинаково инициализируются? 0_о

[Андрей]

imko, если я инициализирую один класс, то работает только один слайдер, самый последний, хотя все слайдеры имеют этот класс

[ProjectSoft]

Зачем в DOMContentLoaded пихать $(document).ready?
$(document).ready срабатывает когда документ прочитан.
И уж если пишите на jQuery, так и пишите на нём.
Зачем в $(document).ready вкладываете $(document).ready? Чувствуете что что-то ни так?

$(document).ready(function(){
	let sliderUniqum = '.slider-uniqum';
	let classes = [];
	let i = 0;

	const sliders = [...document.querySelectorAll('.slick-super-slider')];

	sliders.forEach(item => {
		i++;
		let $item = $(item);
		sliderUniqum = sliderUniqum + i;
		$item.addClass(sliderUniqum);
		// Вызываем slick для данного элемента (слайдера)
		$item.slick({
			slidesToShow: 3,
			slidesToScroll: 3,
			prevArrow: false,
			// Где находится .next-slide?
			nextArrow: $('.next-slide'),
		});
	});
});

[Андрей]

imko, точнее стрелка, в стрелке там проблема, листать можно зажимая клавишу слайдера, а стрелка, на любом слайдере нажмешь на стрелку и листается последний слайдер

[imko]

ProjectSoft, еще проще пишется

document.querySelectorAll('.slick-super-slider').forEach((slider, index) => {
	slider.classList.add(`sliderUniqum${index}`)
	$(slider).slick({
		slidesToShow: 3,
		slidesToScroll: 3,
		prevArrow: false,
		nextArrow: $('.next-slide'),
	})
})

индекс нигде не используется кроме создания имени класса и всегда соответствует индексу, массив этих классов тоже ненужОн, ну и ты понял короче)

[imko]

Андрей, nextArrow: $('.next-slide'), все слайдеры будут при нажатии на любую из стрелок переключаться

[ProjectSoft]

imko, да это правильно.
И я уж не стал оптимизировать код полностью под jQuery... В данной ситуации просто глупо. Нужно хотябы направить на правильный код вообще...

[imko]

Андрей, ожидаемо, ты ж по всей странице все стрелки собрал и каждому слайдеру назначил в качестве контрола

[Андрей]

Всем спасибо, разобрался, jquery не знаю, поэтому смешиваю с js

$(document).ready(function(){   
  var sliders = $('.slick-super-slider');
  var nextArrows = $('.next-slide');

  sliders.each(function(index, element) {
    var $slider = $(element);
    var $nextArrow = $(nextArrows[index]);

    $slider.slick({
      slidesToShow: 3,
      slidesToScroll: 3,
      prevArrow: false,
      nextArrow: $nextArrow,
    });
  });
});

Answer 1

[Андрей]

$(document).ready(function(){   
  var sliders = $('.slick-super-slider');
  var nextArrows = $('.next-slide');

  sliders.each(function(index, element) {
    var $slider = $(element);
    var $nextArrow = $(nextArrows[index]);

    $slider.slick({
      slidesToShow: 3,
      slidesToScroll: 3,
      prevArrow: false,
      nextArrow: $nextArrow,
    });
  });
});