0

我正在使用 iDangerous 滑块显示厨房，除此之外，我想显示每个图像的描述，但我无法理解。

我尝试将图像中的 z-index 设置为较低的值，并将 .swiper-slide .title 中的 z-index 值设置为较大的值。这是我的代码：

标题

字幕

启用流体模式

当您释放幻灯片时，它会继续移动一段时间

幻灯片 3

继续滑动

这是CSS代码：

.swiper-container {
  width: 600px;
  height: 110px;
  color: #fff;
  text-align: center;
}

.red-slide {
  background: #ca4040;
}

.swiper-slide .title {
    font-style: italic;
    font-size: 42px;
    margin-top: 20px;
    margin-bottom: 0;
    position:relative;
    z-index:1000;
    line-height: 45px;
}
.swiper-slide p {
  font-style: italic;
  font-size: 25px;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}

Javascript：

<script>
var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    freeMode: true,
    autoplay: 10000,
    speed:1750,
    loop: true,
    freeModeFluid: true
  })
</script>

我希望你能帮助我，谢谢

4

1 回答 1

1

为每张幻灯片添加一个带有您要显示的标题的 DIV。

<div class="swiper-slide"> 
    ... your image here ... 
    <div class="title" id="title_#">Some Title</div>
    ... rest swiper DIV go here
</div>

添加以下 CSS：

  .swiper-slide .title {
        bottom: 20px;
        left: 20px;
        float: left;
        position: absolute;
        width: 100%;
        z-index: 9999;
        color: #FFFFFF;
        font-size: 0.75em;
        margin-bottom: 50px;
    }

通过这样做，您的所有幻灯片现在都会有一个标题，但它们会相互重叠。所以你需要先隐藏所有，然后显示活动的。

添加以下两个事件：

 onTransitionStart: function () {
                        $(".swiper-slide div.title").hide();
                    },
 onTransitionEnd: function (mySwiper) {
                        $("#title_" + mySwiper.activeIndex).show("slow");
                    }

标题 DIV 的 ID 取决于您的自定义逻辑。

于 2017-03-24T10:47:27.143 回答