My Slick Slider не работает, когда я переключаюсь с помощью кнопки 2 изображения

Question

У меня есть 2 карусели для отображения в одном и том же месте моего веб-сайта, переключаются с 2 из моей ссылки на изображение, карусель создается с помощью слайдера. но когда я нажимаю на вторую кнопку, которая «скоро появится», я могу видеть только следующий и предыдущий значок, и только щелкнув следующий значок, я увижу 2-й слайдер. Вот ссылка - http://www.clearedge.com.sg/staging/samplesite/slider.html

Мой HTML-код:

<div class="container"> 
    <div class="row"> 
    <div class="text-justify col-lg-12"> 
     <div class="nowshowing"> 
     <div> 
      <div class="nowshowing-title"> 
      <div id="nav"> 
       <a href="#content1"><img id="#nowshowing" src="images/nowshowing.jpg"></a> 
       <a href="#content2"><img src="images/comingsoon.jpg"></a> 
      </div> 
      </div> 
     </div> 
     <div class="slider-background"> 
      <div id="content1" class="toggle"> 
      <section id="nav2" class="responsive slider"> 
       <div> 
       <a href="#ns_movie1"><img src="images/movie1.jpg"></a> 
       </div> 
       <div> 
       <a href="#ns_movie2"><img src="images/movie2.jpg"></a> 
       </div> 
       <div> 
       <a href="#ns_movie3"><img src="images/movie3.jpg"></a> 
       </div> 
       <div> 
       <a href="#ns_movie4"><img src="images/movie4.jpg"></a> 
       </div> 
       <div> 
       <a href="#ns_movie5"><img src="images/movie5.jpg"></a> 
       </div> 
       <div> 
       <a href="#ns_movie6"><img src="images/movie1.jpg"></a> 
       </div> 
      </section> 
      </div> 
      <div id="content2" class="toggle" style="display:none;"> 
      <section id="nav2" class="responsive2 slider"> 
       <div> 
       <img src="images/movie2.jpg"> 
       </div> 
       <div> 
       <img src="images/movie2.jpg"> 
       </div> 
       <div> 
       <img src="images/movie2.jpg"> 
       </div> 
       <div> 
       <img src="images/movie2.jpg"> 
       </div> 
       <div> 
       <img src="images/movie2.jpg"> 
       </div> 
       <div> 
       <img src="images/movie2.jpg"> 
       </div> 
      </section> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Мой JQuery:

$("#nav a").click(function(e) { 
    e.preventDefault(); 
    $(".toggle").hide(); 
    var toShow = $(this).attr('href'); 
    $(toShow).show(); 
}); 

$('.responsive').slick({ 
    dots: false, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 5, 
    slidesToScroll: 1, 
    responsive: [{ 
     breakpoint: 1024, 
     settings: { 
     slidesToShow: 3, 
     slidesToScroll: 3, 
     infinite: true, 
     dots: true 
     } 
    }, { 
     breakpoint: 600, 
     settings: { 
     slidesToShow: 2, 
     slidesToScroll: 2 
     } 
    }, { 
     breakpoint: 480, 
     settings: { 
     slidesToShow: 1, 
     slidesToScroll: 1 
     } 
    } 
    // You can unslick at a given breakpoint now by adding: 
    // settings: "unslick" 
    // instead of a settings object 
    ] 
}); 


$('.responsive2').slick({ 
    dots: false, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 5, 
    slidesToScroll: 1, 
    responsive: [{ 
     breakpoint: 1024, 
     settings: { 
     slidesToShow: 3, 
     slidesToScroll: 3, 
     infinite: true, 
     dots: true 
     } 
    }, { 
     breakpoint: 600, 
     settings: { 
     slidesToShow: 2, 
     slidesToScroll: 2 
     } 
    }, { 
     breakpoint: 480, 
     settings: { 
     slidesToShow: 1, 
     slidesToScroll: 1 
     } 
    } 
    // You can unslick at a given breakpoint now by adding: 
    // settings: "unslick" 
    // instead of a settings object 
    ] 
}); 

Любая помощь очень ценится.

AJAY

Answer 1

$('.slider').slick({ 
    dots: true, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 5, 
    slidesToScroll: 1, 
    responsive: [{ 
     breakpoint: 1024, 
     settings: { 
      slidesToShow: 3, 
      slidesToScroll: 3, 
      infinite: true, 
      dots: true 
     } 
     }, { 
     breakpoint: 600, 
     settings: { 
      slidesToShow: 2, 
      slidesToScroll: 2 
     } 
     }, { 
     breakpoint: 480, 
     settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1 
     } 
     } 
     // You can unslick at a given breakpoint now by adding: 
     // settings: "unslick" 
     // instead of a settings object 
    ] 
    }); 


$("#link2").click(function(e) { 

    $('.slider2').slick({ 
    dots: true, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 5, 
    slidesToScroll: 1, 
    responsive: [{ 
     breakpoint: 1024, 
     settings: { 
      slidesToShow: 3, 
      slidesToScroll: 3, 
      infinite: true, 
      dots: true 
     } 
     }, { 
     breakpoint: 600, 
     settings: { 
      slidesToShow: 2, 
      slidesToScroll: 2 
     } 
     }, { 
     breakpoint: 480, 
     settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1 
     } 
     } 
     // You can unslick at a given breakpoint now by adding: 
     // settings: "unslick" 
     // instead of a settings object 
    ] 
    }); 

});