슬릭 싱크 슬라이더를 반응시키는 방법?

Question

매끄러운 동기화를 사용하여 두 개의 슬라이더를 추가했습니다. 나는 그들을 어떻게 반응하게하는지 전혀 모른다. 반응 형 []을 사용하여 슬라이더를 반응시키는 방법에 대한 지식이 있지만 동기화 슬라이더로 진행할 수는 없습니다. 당신은 좀 자신에게 지적

Answer 1

$('.slider-for').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    arrows: false, 
 
    fade: true, 
 
    asNavFor: '.slider-nav' 
 
}); 
 
$('.slider-nav').slick({ 
 
    slidesToShow: 3, 
 
    slidesToScroll: 1, 
 
    asNavFor: '.slider-for', 
 
    dots: true, 
 
    centerMode: true, 
 
    focusOnSelect: true 
 
});

, 당신은 의도 한대로 작동하게하기 위해 반응 [] 섹션을 사용해야합니다. 예 :

$('.section').slick({ 
     centerMode: true, 
     centerPadding: '25px', 
     infinite: false, 
     arrows: true, 
     initialSlide: 1, 
     slidesToShow: 1, 
     responsive: [ 
      { 
       breakpoint: 3000, 
       setting: { 
        slidesToShow: 3 
       } 
      }, 
      { 
       breakpoint: 1400, 
       setting: { 
        slidesToShow: 2 
       } 

      }, 
      { 
       breakpoint: 800, 
       setting: { 
        slidesToShow: 1 
       } 

      } 
     ] 
    }); 

위의 예와 3000px 1400px 간의 3 개 슬라이드 1400px 및 800 픽셀 800 픽셀 및 아래 1 개 슬라이드 사이에 2 개 슬라이드를 표시한다. 3000px 이상의 중단 점이 없으므로이 값은 위의 해상도 너비에 대한 설정이됩니다.

나는 매끄럽게 동작하는데 많은 어려움을 겪었으며 때로는 페이지의로드 순서가 다른 컨트롤과 함께 작동하도록 바뀌어야하지만 가끔씩 제공되어 작동하는지 확인하십시오.