Роман Матвеев

у меня вот такой метод сработал
мне нужно было встроить слайд или блок где нет еще слайдов после загрузки страницы и при добавлении чтоб перезапускался слайдер
вот эти способы не помогали
$('.slider').slick('init');
$('.slider').slick('reinit');
$('.slider').slick('setPosition');

помогло когда заново у слайдера перегружаешь параметры его, но перед этим удлаешь всю инизиализацию методом - unslick

$('body').on('click', '.btnAdd', function (event) {
        event.preventDefault();
        $('.Slider').slick('unslick');
        $('.Slider').slick(SlickSlider());
    });

    function SlickSlider() {
        return {
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1
        };
    }

или вот так

slickCarousel();

function slickCarousel() {
    $('.skills_section').slick('unslick');
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

попробуйте как тут говорится
https://soltau.ru/index.php/en/themes/diy/item/523...

у меня получилось

Вопрос решен
Пошел другим путем , использовал сам Emmet а вернее его настройки.
https://code.visualstudio.com/docs/editor/emmet#_u...
в фале сниппетов для emmet сделал свой и все сработfло:

"css": {
	  "snippets": {
		"md": "@include max-s(${1}px)  {\n  ${0} \n}"
	  }
	}

я вот так сделал два слайдера не зависимых друг от друга

<section class="slider">
        <div class="flexslider slider1">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider carousel">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
      </section>

<section class="slider">
        <div class="flexslider slider1">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider carousel">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
      </section>

<script type="text/javascript">
     $(window).load(function(){
      $('.carousel').each(function() {
        var slider1 = $(this).parent().children(".slider1");
              $(this).flexslider({
              animation: "slide",
              controlNav: false,
              animationLoop: false,
              slideshow: false,
              itemWidth: 210,
              itemMargin: 5,
              asNavFor: slider1
               
            });
          });
      
$('.slider1').each(function() {
      var carousel = $(this).parent().children(".carousel");
      $(this).flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: carousel,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });

    });

  });
  </script>