2016-10-27 301 views
3

我们在应用程序中使用React-Slick作为旋转木马效果。滑块中的内容是动态的,轮播项目的长度可以在4到20之间。React-Slick旋转木马 - 禁用箭头

问题是,即使所有内容的宽度小于滑块轨道的宽度,右箭头工作。

Carousel

什么是溶液/变通方法来隐藏或在这样的情况下禁用这些箭头?

+0

不要他们甚至可以禁用?如果你提供你的代码会很好,所以我们可以重现这个问题。 –

回答

0

使用CSS和JS一起修改基于数据内容的箭头可见性。

我没有代表尚未将其作为评论发布,但应该做的伎俩。

0
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