Question

我是新来的反应者，当轮播中没有更多图像时，我正在尝试应用一种效果。我使用的是react-slick，尽管我可以根据自己的文档配置一些功能，但是我无法应用此效果...

应该发生的事情是，一旦转盘中没有更多图像，请对第一张图像进行“滚动”操作。这些图像是我从头到尾得到的，因此我可以有很多图像，也可以只有几幅正在调查中，我认为我应该对slickGoTo做一个if，但是老实说我不知道如何获得实现它的价值..我感谢任何帮助！

这是我的代码：

function SampleNextArrow(props) {
  const { onClick } = props;
  return (
    <button type='button' onClick={onClick} className="slick-next slick-arrow" style={{ right: '0vw' }}><FaChevronRight size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
  );
}

function SamplePrevArrow(props) {
  const { onClick } = props;
  return (
    <button type='button' onClick={onClick} className="slick-prev slick-arrow" style={{ left: '0vw' }}><FaChevronLeft size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
  );
}
const settings = {
      initialSlide: 0,
      infinite: false,
      cssEase: 'linear',
      mobileFirst: true,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      variableWidth: true,
      responsive: 
      [{
        breakpoint: 425,
        settings: {
          slidesToShow: 2, slidesToScroll: 1, infinite: false
        }
      },
      {
        breakpoint: 320,
        settings: {
          slidesToShow: 1, slidesToScroll: 1, infinite: false
        }
      }]
    };



return (
              <div className='container'>
                <Slider {...settings} >
                  {
                    elementos.map((item, index) => { 
                        return (
                               <p>{item.name}</p>
                               <p>{item.subtitle}</p>
                            )
                    })
                  }  

                </Slider>
               </div>

)

没有更多图像时，在滑动滑块的反应中应用效果

0 个答案: