Why does Slick slider only fire once per page?

Question

JavaScript

hello!
help me figure it out please.
made up for several completely identical slick sliders on one page , the link
is supposed to be displayed from the database, so you need to loop their initialization.
at first there were several identical blocks of code, with different id (model1, model2, model3, nav1, nav2, nav3, etc. ):

$('#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
          }
        }
      ]
    });

after I rewrote it using each, only the first slider of all works:

$('.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
              }
            }
          ]
        }); 
      }
    });

thank you in advance!

Answer 1

I may be wrong, but

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

will return the ID of the first element found, with the class model-slider . Same with model_slider_nav_id . Try to separate slider initialization for .model-slider and .model-slider-nav and access via $(this) .