Подскажите, пожалуйста, как по клику отображать/скрывать нужный слайдер?

262

12 апреля 2022, 11:50

У меня есть список, по клику на элемент списка у меня отображается нужный слайдер(использую slick-slider). Если повторно нажать на элемент списка, слайдер ломается: отображаются иконки кнопок слайдера вперед/назад вместо слайдов. Переключение слайдеров реализовал таким образом:

if ($('.container-slide_wrapper').hasClass('slick-initialized')) {
  console.log('Слайдер уже есть');
  $('.slider-count').empty();
  $('.container-slide_wrapper').removeClass('slick-dotted');
  $('.container-slide_wrapper').removeClass('slick-slider');
  $('.container-slide_wrapper').removeClass('slick-initialized');
  $('#' + tabs).slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    appendDots: '.slider-count',
    nextArrow: '<img class="slick-btn slick-next" src="/upload/medialibrary/09f/09f3e6fed9086d242f0621387057c68f.png" alt="">',
    prevArrow: '<img class="slick-btn slick-prev" src="/upload/medialibrary/290/2908142cc32b5c2f1892c51c6ebc2494.png" alt="">',
  });
} else {
  console.log('Слайдера еще нет');
  $('#' + tabs).slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    appendDots: '.slider-count',
    nextArrow: '<img class="slick-btn slick-next" src="/upload/medialibrary/09f/09f3e6fed9086d242f0621387057c68f.png" alt="">',
    prevArrow: '<img class="slick-btn slick-prev" src="/upload/medialibrary/290/2908142cc32b5c2f1892c51c6ebc2494.png" alt="">',
  });
  $('.slide_num').addClass('display-on_flex');
  $('.slide-title').addClass('display-on');
}

Answer 1

В общем, чтобы мог переключаться между другими слайдерами по клику без различных багов со слайдерами. Я создал дополнительный input с типом hidden, куда поместил id обертки слайдера, после проверял был ли инициализирован слайдер, если был, то удаляю его.

$('.rounded3 a').on('click', function (e) {
        //e.preventDefault();
        let tabs = $(this).attr('href').slice(1);
        if ($('#'+$('.inpit-hidden').val()).hasClass('slick-initialized')) {
            $('#'+$('.inpit-hidden').val()).slick('destroy'); 
        }
        //
        if ($('#'+tabs).not('.slick-initialized')) {
            $('#'+tabs).slick({
                dots: true,
                infinite: true,
                speed: 500,
                fade: true,
                cssEase: 'linear',
                appendDots: '.slider-count',
                nextArrow: '<img class="slick-btn slick-next" src="http://woodmarket.online.vi.dev.it-buro.ru/upload/medialibrary/09f/09f3e6fed9086d242f0621387057c68f.png" alt="">',
                prevArrow: '<img class="slick-btn slick-prev" src="http://woodmarket.online.vi.dev.it-buro.ru/upload/medialibrary/290/2908142cc32b5c2f1892c51c6ebc2494.png" alt="">',
            });
            $('.slide_num').addClass('display-on_flex');
            $('.slide-title').addClass('display-on');
            console.log('Установили слайдер');
        }
        $('.inpit-hidden').val(tabs);
    });