Question

我目前正在使用 Slick 来制作旋转木马。

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

1)

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

如您所见，虽然当前幻灯片与上一张正确重叠（Spyro > Crash），但下一张与当前幻灯片重叠（Tekken > 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; 命令。你有什么建议？我该如何解决这个问题？

谢谢大家。

Answer 1

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

<块引用>

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

您可以在 z-index here

上阅读更多信息

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

1 个答案: