Question

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

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

标题

字幕

启用流体模式

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

幻灯片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取决于您的自定义逻辑。

iDangerous滑块显示文本图像

1 个答案: