web-dev-qa-db-ja.com

React-Slickカルーセル-矢印を無効にする

アプリケーションのカルーセル効果にはReact-Slickを使用しています。スライダーのコンテンツは動的であり、カルーセルアイテムの長さは4〜20の間です。

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

Carousel

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

reactjsreact-slick
9
Kashif Nazar

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

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

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

矢印を無効にするには、prop'arrows 'を追加して値' false 'を設定するだけです。

 const settings = {
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      className: 'notes-slider',
      autoplay: true,
      autoplaySpeed: 7000,
    };
  • リストアイテム
2
Andrey Bagriy
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
0
RVCoder

データコンテンツに基づいて矢印の可視性を変更するには、JSとともにCSSを使用します。

コメントとして投稿する担当者はまだいませんが、それでうまくいくはずです。

0
thedarkone