React-Slick Carousel - 矢印を無効にする

Question

私たちのアプリケーションでは、カルーセル効果にReact-Slickを使用しています。スライダー内のコンテンツは動的で、キャリングコンテンツの長さは4〜20の間で設定できます。

問題は、すべてのコンテンツの幅がスライダートラックの幅よりも小さい場合でも、右矢印が働く。

このような場合にはこれらの矢印を非表示にしたり無効にする解決策/回避策は何ですか？

Answer 1

CSSをJSとともに使用すると、データの内容に基づいて矢印の可視性を変更できます。

コメントはまだ投稿されていませんが、そのトリックを行う必要があります。

Answer 2

ドキュメントをご覧ください。彼らはそれを無効にするオプションがあります。

https://github.com/akiran/react-slick

<ReactSlick arrows={false}>...</ReactSlick> 

Answer 3

Below is my code and to disable arrows just make arrows as false in settings : 

class SimpleSlider extends React.Component { 
render() { 
     var settings = { 
     dots: true, 
     autoplay: true, 
     arrows: false 
    }; 

    return (
     <Slider {...settings}> 
      <div><img src='../../src/assets/1.jpg' /></div> 
      <div><img src='../../src/assets/2.jpg' /></div> 
      <div><img src='../../src/assets/3.jpg' /></div> 
      <div><img src='../../src/assets/4.jpg' /></div> 
     </Slider> 
    ); 
} 
} 

Some more configurable properties can be found here : https://www.npmjs.com/package/react-slick