@lagprincesse

Почему Slick slider срабатывает только один раз на странице?

здравствуйте!
помогите разобраться, пожалуйста.
наверстала несколько совершенно идентичных slick слайдеров на одной странице ссылка
предполагается, что выводиться они буду из БД, поэтому нужно зациклить их инициализацию.
сначала было несколько одинаковых блоков кода, с разными id (model1, model2, model3, nav1, nav2, nav3 и т.д. ):
$('#model1').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '#nav1'
    });
    $('#nav1').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      asNavFor: '#model1',
      centerMode: true,
      centerPadding: 0,
      vertical: true,
      verticalSwiping: true,
      dots: false,
      focusOnSelect: true,
      arrows: false,
      responsive: [
        {
          breakpoint: 767,
          settings: {
            vertical: false,
            verticalSwiping: false,
            arrows: false
          }
        }
      ]
    });

после того как переписала через each, работает только первый слайдер из всех:
$('.model-slider, .model-slider-nav').each(function(index){

      var model_slider_id = $('.model-slider').attr('id');
      var model_slider_nav_id = $('.model-slider-nav').attr('id');

      if( typeof(model_slider_id) != 'undefined' && model_slider_id != '' && typeof(model_slider_nav_id) != 'undefined' && model_slider_nav_id != '' ) {

        $('#'+model_slider_id).slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          asNavFor: '#'+model_slider_nav_id
        });

        $('#'+model_slider_nav_id).slick({
          slidesToShow: 4,
          slidesToScroll: 1,
          asNavFor: '#'+model_slider_id,
          centerMode: true,
          centerPadding: 0,
          vertical: true,
          verticalSwiping: true,
          dots: false,
          focusOnSelect: true,
          arrows: false,
          responsive: [
            {
              breakpoint: 767,
              settings: {
                vertical: false,
                verticalSwiping: false,
                arrows: false
              }
            }
          ]
        }); 
      }
    });

заранее спасибо за помощь!
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
serg3y
@serg3y
Web разработчик
Я может ошибаюсь, но
var model_slider_id = $('.model-slider').attr('id');
будет возвращать ID первого найденного элемента, с классом model-slider. Тоже самое с model_slider_nav_id. Попробуйте разделить инициализацию слайдера для .model-slider и .model-slider-nav и через $(this) обращаться.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы