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

【问题标题】：React Slick slider, current active slide overlapped by next slideReact Slick 滑块，当前活动幻灯片与下一张幻灯片重叠
【发布时间】：2021-08-27 11:49:15
【问题描述】：

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

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

我目前正在使用一个滑块，我想在其中显示 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;

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

谢谢大家。

【问题讨论】：

尝试将z-index: 2 添加到.activeSlide css 类。问题可能是因为您所有的幻灯片都堆叠在同一个 z-index 上。
我试过但没用
你能不能对.activeSlide img{}做同样的事情并检查一次。 z-index: 2.
不幸的是 z-index 似乎毫无意义
这不是毫无意义的。只是你无法破解它。如果您可以添加代码演示，我可以检查还有什么造成了问题。也许在codesandbox.io

标签： javascript css reactjs carousel slick.js

【解决方案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;  
}

【讨论】：