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

Question

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

基本上，在我的 slick 滑块中，我有 6 张图像，我想在 slick 上和下一个 slick 之前（单击 arrows/dotts 之后）制作动画。有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,
            settings: {
              arrows: false,
              centerMode: true,
              centerPadding: '40px',
              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>
    );
  }
}

谢谢

Answer 1

您的问题来自 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：您可以从设置

中删除'center'参数

centerMode: true,
centerPadding: '10px',

演示：Here

代码：Here

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

slick slider 1 image moves down

reactjs

slick.js