매끄러운 슬라이더에 반응하지 않는 중단 점

브라우저의 크기를 조정하지 않고도 잘 작동하는 매끄러운 슬라이더를 구현했습니다. 그러나 브라우저의 크기를 1024로 조정하면 반응하는 중단 점 설정이 작동하지 않습니다.매끄러운 슬라이더에 반응하지 않는 중단 점

Jquery--

$('.slider').slick({ 
    centerMode: true, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    dots: true, 
    infinite: true, 
    cssEase: 'linear', 
    variableWidth: true, 
    variableHeight: true, 
    mobileFirst: true, 
    responsive: [{ 
    breakpoint: 1024, 
    settings: { 
     slidesToShow: 4, 
     slidesToScroll: 1, 
     centerMode: false 
    } 
    }] 
});

데모 - 어떤 도움을 매우 높이 평가된다 https://jsfiddle.net/squidraj/hn7xsa4y/4/

출처

2017-02-06 Prithviraj Mitra

CSS3 미디어 쿼리를 사용하여 슬라이더에 응답합니다. –

물리적으로 크기를 조정 한 후에 슬라이더가 깨지십니까? 페이지를 새로 고침하면 문제가 있습니까? * 브라우저의 크기를 조정하는 사람들을위한 스크립팅에 대해 걱정하지 마십시오. 시간 낭비입니다. – ntgCleaner

@ntgCleaner 브라우저 크기를 조정해도 슬라이더가 깨지지 않습니다. 그것은 잘 작동하지만 그 설정이 작동하지 않습니다. 해당 중단 점에서 페이지를 다시로드하면 올바르게 작동합니다. –

먼저, 예에서 이전 버전의 slick을 사용합니다. 이 verson은 mobileFirst 속성을 지원하지 않습니다. slidesToShow 속성을 사용하려면 variableWidth을 제거해야합니다. 이하는 바이올린에게 https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

출처

2017-02-06 22:14:15

1025 이상에서 슬라이더는 왼쪽과 오른쪽에 2 개의 부분 이미지가있는 하나의 가운데 이미지를 표시합니다.이 이미지는 variableWidth를 사용하여 내 바이올린에서 잘 작동합니다 (그렇지 않으면 공백이 생깁니다). 이제 브라우저의 크기를 1024로 변경하면 4 개의 슬라이드가 표시됩니다 (이미지 자르기는 제외). 나는 매끄러운의 최신 버전을 사용하고 있습니다. –

미디어 쿼리 내의 조정이 작동하지만 플러그인 페이지에 명시된대로 중단 점이 작동하지 않는 이유를 찾으려고했습니다. –

내 피들을보세요. 1024 이하의 슬라이드 1 개, 1025 개 및 4 개 이상의 슬라이드. –

을하고있다 나는 당신의 JS 템플릿은 아래에 실패하는 이유는 확실하지 않다 :

responsive: [{ 
    breakpoint: 1024,

나는 그들의 문서, 커뮤니티와 후속 조치, 또는 버그를 제출할 것입니다.

어쨌든 CSS3를 사용하는 것이 더 좋습니다.media queries. 하나의 접근 방식; 슬라이더 주변에 div을 중첩시키고 relative으로 배치하고 크기를 조절하고 width: 100%;의 자식 요소이며 정의 된 해상도 내에서 max 및 minwidth을 선언합니다. 이것은 올바른 방향으로 당신을 시작해야합니다. meta viewport도 올바르게 사용하십시오.

출처

2017-02-07 01:05:16

이것은 나를위한 트릭입니다.

function resetSlick($slick_slider, settings) { 
      $(window).on('resize', function() { 
       if ($(window).width() < 320) { 
        if ($slick_slider.hasClass('slick-initialized')) { 
         $slick_slider.slick('unslick'); 
        } 
        return 
       } 

       if (!$slick_slider.hasClass('slick-initialized')) { 
        return $slick_slider.slick(settings); 
       } 
      }); 
     } 

slick_slider = $('.client-logos'); 
    settings = { 
     slidesToShow: 6, 
     slidesToScroll: 1, 
     autoplay: true, 
     autoplaySpeed: 2000, 
     prevArrow: '', 
     nextArrow: '', 
     pauseOnHover: true, 

     responsive: [ 
      { 
       breakpoint: 1024, 
       settings: { 
        slidesToShow: 5, 
        slidesToScroll: 1, 
       } 
      }, 
      { 
       breakpoint: 600, 
       settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
       } 
      } 
      // You can unslick at a given breakpoint now by adding: 
      // settings: "unslick" 
      // instead of a settings object 
     ] 

    }; 
    slick_slider = $('.container'); 
    settings = { 
     slidesToShow: 6, 
     slidesToScroll: 1, 
     autoplay: true, 
     autoplaySpeed: 2000, 
     prevArrow: '', 
     nextArrow: '', 
     pauseOnHover: true, 

     responsive: [ 
      { 
       breakpoint: 1024, 
       settings: { 
        slidesToShow: 5, 
        slidesToScroll: 1, 
       } 
      }, 
      { 
       breakpoint: 600, 
       settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
       } 
      } 
      // You can unslick at a given breakpoint now by adding: 
      // settings: "unslick" 
      // instead of a settings object 
     ] 

    }; 
    slick_slider.slick(settings); 
    resetSlick(slick_slider, settings);

js에 이것을 추가하고 그림과 같이 슬라이더를 호출하십시오.

귀하의 CSS에서 slidedisplay: inline-block;입니다. 모든 반응 스크린에서 작동합니다.

출처

2017-04-29 21:04:15

매끄러운 슬라이더에 반응하지 않는 중단 점

답변

관련 문제