如何解决如何在奇数幻灯片上显示文字?
我正在尝试为滑块文本创建效果 - like here
我的代码
new Swiper('.slider__swiper',{
lazy: true,lazy: {
loadPrevNext: true,loadPrevNextAmount: 6,},loop: false,speed: 1000,spaceBetween: 30,slidesPerView: 6,preloadImages: true,mousewheel: {
releaseOnEdges: true,breakpoints: {
320: {
slidesPerView: 1,spaceBetween: 16,640: {
slidesPerView: 2,991: {
slidesPerView: 2,}
}
});
.slider {
height: 300px;
}
.slider_title {
font-size: 7vw;
text-transform: uppercase;
color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.swiper-slide:nth-child(odd) {
z-index: 9;
}
.swiper-slide:nth-child(odd):before {
content: 'ODD';
position: absolute;
top: 0;
left: 0;
color: #00f;
z-index: 99;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="slider">
<h2 class="slider_title">Text text</h2>
<div class="swiper-container slider__swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/animals" alt="">
</div>
<div class="swiper-slide">
<img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/arch" alt="">
</div>
<div class="swiper-slide">
<img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/nature" alt="">
</div>
<div class="swiper-slide">
<img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/people" alt="">
</div>
</div>
</div>
</div>
尝试执行以下操作,使文本为 Text text
- 奇数幻灯片显示在幻灯片上方
- 偶数 - 在幻灯片下
为此,我这样做
.swiper-slide:nth-child(odd){
z-index: 9;
}
可惜它不起作用。
原因已确定 - class="swiper-wrapper" - transform: translate3d
创建堆叠上下文
告诉我,如何解决?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。