javascript - iDangerous Slider 在图像上显示文字

Question

我正在使用 iDangerous slider 来显示厨房，除此之外我想显示每张图片的描述，但我做不到。

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

标题

副标题

启用流体模式

当你松开 slider 时，它会继续移动一段时间

幻灯片 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>

希望你能帮帮我，谢谢

Answer 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由你的自定义逻辑决定。