问题描述
我目前正在使用 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;
命令。
你有什么建议?我该如何解决这个问题?
谢谢大家。
解决方法
您需要将 position
元素应用于 .slide
才能使 z-index 正常工作。
注意:z-index 仅适用于定位元素(位置:绝对、位置:相对、位置:固定或位置:粘性)和弹性项目(作为 display:flex 元素的直接子元素的元素)。
您可以在 z-index here
上阅读更多信息