React Slick 滑块，当前活动幻灯片与下一张幻灯片重叠

Posted 2023-05-07

【中文标题】React Slick 滑块，当前活动幻灯片与下一张幻灯片重叠

【英文标题】：React Slick slider, current active slide overlapped by next slide

【发布时间】：2021-08-27 11:49:15

【问题描述】：

我目前正在使用 Slick 来制作轮播。

我现在有两个问题，让我们从第一个开始。

1)

我目前正在使用一个滑块，我想在其中显示 3 张幻灯片：当前图像 (Spyro)、上一张 (Crash) 和下一张 (Tekken)。

如您所见，虽然当前幻灯片正确地与前一张幻灯片重叠（Spyro > Crash），但下一张幻灯片与当前幻灯片重叠（铁拳 > Spyro）。

当然，我希望当前幻灯片位于它们之上...我该如何解决这个问题？

我附上下面的代码。

App.js

import "./App.css";
import  useEffect, useState  from "react";
import Slider from "react-slick";
import SliderData from "./SliderData";

import  AiOutlineArrowLeft, AiOutlineArrowRight  from "react-icons/ai";

function useWindowSize() 
  const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
  useEffect(() => 
    const handleResize = () => setSize([window.innerHeight, window.innerWidth]);
    window.addEventListener("resize", handleResize);
  , [])
  return size;



const array = SliderData.map((x) => 
  return x.image;
)

console.log(array);

function App() 
  const NextArrow = ( onClick ) => 
    return (
      <div className="arrow next" onClick=onClick>
        <AiOutlineArrowRight />
      </div>
    );
  ;

  const PrevArrow = ( onClick ) => 
    return (
      <div className="arrow prev" onClick=onClick>
        <AiOutlineArrowLeft />
      </div>
    );
  ;

  const [imageIndex, setImageIndex] = useState(0);

  const [height, width] = useWindowSize();

  const settings = 
    className: "center",
    infinite: true,
    lazyLoad: true,
    speed: 300,
    slidesToShow: width > 1000 ? 3: 1,
    centerMode: true,
    centerPadding: "60px",
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    beforeChange: (current, next) => 
      console.log(current);
      setImageIndex(next);
    
  ;

  return (
    <div className="App">
        <Slider ...settings>
          array.map((img, idx) => (
            <div className=idx === imageIndex ? "slide activeSlide" : "slide">
              <img src=img alt=img />
            </div>
          ))
        </Slider>
    </div>
  );


export default App;

App.css

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

.App 
  width: 100%;
  margin: 10rem auto;
  height: 570px;


.slide img 
  width: 35rem;
  align-items: center;
  margin: 0 auto;
  z-index: 1;


.slide 
  transform: scale(0.8);
  transition: transform 300ms;
  opacity: 0.5;
  z-index: -1;


.activeSlide 
  transform: scale(1.1);
  align-items: center;
  opacity: 1;


.arrow 
  background-color: #fff;
  position: absolute;
  cursor: pointer;
  z-index: 10;


.arrow svg 
  transition: color 300ms;


.arrow svg:hover 
  color: #68edff;


.next 
  right: 3%;
  top: 50%;


.prev 
  left: 3%;
  top: 50%;

SliderData.js

const SliderData = [
  
    image:
      "https://www.spaziogames.it/wp-content/uploads/2020/06/Crash-4-Pirate_06-29-20.jpg"
  ,
  
    image:
      "https://d2skuhm0vrry40.cloudfront.net/2018/articles/2018-07-18-14-24/news-videogiochi-spyro-reignited-trilogy-video-di-gameplay-livello-colossus-1531920251281.jpg/EG11/thumbnail/750x422/format/jpg/quality/60"
  ,
  
    image: "https://i.ytimg.com/vi/OUh82pOFGDU/maxresdefault.jpg"
  ,
  
    image: "https://www.psu.com/wp/wp-content/uploads/2020/07/MetalGearSolidRemake-1024x576.jpg"
  
];

export default SliderData;

---

2)

如您所见，活动幻灯片未完全居中。因为我很喜欢 CSS，所以我没有使用 display: flex; 命令。 你有什么建议？我该如何解决这个问题？

谢谢大家。

【问题讨论】：

尝试将z-index: 2 添加到.activeSlide css 类。问题可能是因为您所有的幻灯片都堆叠在同一个 z-index 上。

我试过但没用

你能不能对.activeSlide img做同样的事情并检查一次。 z-index: 2.

不幸的是 z-index 似乎毫无意义

这不是毫无意义的。只是你无法破解它。如果您可以添加代码演示，我可以检查还有什么造成了问题。也许在codesandbox.io

【参考方案1】：

您需要将position 元素应用到.slide 以使z-index 正常工作。

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘性）和弹性项目（作为 display:flex 元素的直接子元素的元素）。

您可以在z-index here上阅读更多内容

【参考方案2】：

这是我对这个问题的回答。基本上你应该为每个项目设置位置和 z-index 并为当前活动项目设置更高的 z-index

.App .slick-slide   
  position: relative;  
  z-index: 1; 
  /* your choice,  but make sure z-index of active slide is higher than this value */
  
.App .slick-slide.slick-current   
   z-index: 10;