光滑的滑块 1 图像向下移动

如何解决光滑的滑块 1 图像向下移动

我已经尝试了一段时间，但无法自己找到解决方案。

基本上，在我的 slick 滑块中，我有 6 个图像，我想在下一个 slick 之前和之前的 slick 上动画（单击箭头/点之后）。有2个问题；如您在 screenshot of the page 中看到的那样，如果我显示 5 张图像，则一张图像向下移动，如果我显示 6 张图像，则第一张图像比其他图像小。

import React,{Component} from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import './trendslider.css'


export default class CenterMode extends Component {
  
  imageClick = () =>{
    return (
      <div>
        <h1>THIS IS TRENDING PAGE</h1>
      </div>
    )
  }
  
  render () {
      const settings = {
        centerMode: true,centerPadding: "10px",slidesToShow: 5,speed: 500,slidesToScroll: 1,arrows: true,// dots: true,responsive: [
          {
            breakpoint: 768,settings: {
              arrows: false,centerMode: true,centerPadding: '40px',slidesToShow: 3
            }
          },{
            breakpoint: 480,slidesToShow: 1
            }
          }
        ]
      };
      
      const imgs = [
      'images/01.jpg','images/02.jpg','images/03.jpg','images/04.jpg','images/05.jpg','images/06.jpg'
    ];
      
      const renderSlides = () => 
      imgs.map(num => (
        <img className='trending-img' src = {num} alt="" on onClick={this.imageClick}></img>
      ));
  
    return (
      <div className = "App">
        <h4 className = 'header'>Trending</h4>
        <section class="center slider">
          <div>
            <Slider {...settings}>
              {renderSlides()}
            </Slider>
            
          </div>
        </section>
      </div>
    );
  }
}

谢谢

解决方法

你的问题来自css。您在图像之间有一个边距，因此您肯定在这些类（或其中之一）中有参数：

.slick-list {
  margin: xx;
}
.slick-slide {
  margin: xx;
}

注释这些行并添加以下内容：

.slick-slider {
  width: 100%;
  overflow: hidden;
}
.slick-list {
  position: relative;
  display: block !important;
  width: 100%;
}
.slick-slide div {
  width: auto;
  margin-right: 10px;
}
.slick-slide img {
  width: calc(100% - 10px) !important;
}

PS：您可以从设置中删除“中心”参数

centerMode: true,centerPadding: '10px',

演示：Here

代码：Here