禁用在最小寬度的反應滑動滑塊

Question

我想禁用最小寬度的反應滑塊：768px，但似乎反應滑動滑塊只支持最大寬度。我在光滑設置中使用responsive屬性，並根據文檔，這爲斷點設置了一個斷點。然而，斷點是最大寬度，而不是最小寬度，我試圖在斷點768px處禁用'unslick'旋轉木馬。有沒有辦法我可以禁用旋轉木馬最小寬度：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 

希望它能幫助。