최소 너비에서 반응 슬릭 슬라이더 사용 안함

Question

최소 너비 : 768px에서 반응 슬라이더를 사용하지 않으려 고했지만 반응 슬릭 슬라이더가 최대 너비 만 지원합니다. 매끄러운 설정에서 responsive 속성을 사용하고 있으며 문서에 따르면이 경우 해당 중단 점에 대한 설정이 적용됩니다. 그러나 중단 점은 최대 너비와 최소 너비가 아니며 중단 점 768px에서 'unslick'으로 회전식 메뉴를 비활성화하려고합니다. min-width : 768에서 최대 너비가 아닌 회전식을 사용할 수 없게하는 방법이 있습니까?

var settings = { 
     dots: true, 
     infinite: true, 
     repsponsive: [ 
      { 
       breakpoint: 768, 
       settings: 'unslick' 
      } 
     ], 
     speed: 500, 
     slidesToShow: 1, 
     slidesToScroll: 1 
    }; 

Answer 1

나는 source code for react-slick을 확인했으며 아래 코드의 일부를 찾았습니다. 이 코드에서 이해 무엇

if (this.props.responsive) { 
     var breakpoints = this.props.responsive.map(breakpt => breakpt.breakpoint); 
     breakpoints.sort((x, y) => x - y); 

     breakpoints.forEach((breakpoint, index) => { 
     var bQuery; 
     if (index === 0) { 
      bQuery = json2mq({minWidth: 0, maxWidth: breakpoint}); 
     } else { 
      bQuery = json2mq({minWidth: breakpoints[index-1], maxWidth: breakpoint}); 
     } 
     this.media(bQuery,() => { 
      this.setState({breakpoint: breakpoint}); 
     }); 
     }); 

     // Register media query for full screen. Need to support resize from small to large 
     var query = json2mq({minWidth: breakpoints.slice(-1)[0]}); 

     this.media(query,() => { 
     this.setState({breakpoint: null}); 
    }); 
} 

는 react-slick 실제로 모두 min-width and max-width을 사용하지만, 주어진 중단 점을 분류 한 후, 첫 번째 거 항상 min-width: 0를 얻을 수있다.

그래서 여기에 할 수있는 일이 있습니다. 조금 해킹하지만 나는 그 일을한다고 생각합니다.

const settings = { 
     dots: true, 
     infinite: true, 
     speed: 500, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     responsive: [ 
     { 
      breakpoint: 768, 
     }, 
     { 
      breakpoint: 10000, // a unrealistically big number to cover up greatest screen resolution 
      settings: 'unslick' 
     } 
     ] 
    }; 

이 코드가하는 일, 그것은 2 개 미디어 항목

@media only screen and (min-width: 0px) and (max-width: 768px) { ... } // empty 
@media only screen and (min-width: 768px) and (max-width: 10000px) { ... } // disables slick 

가 도움이 희망을 만듭니다.