iDangerous Slider在图像上显示文本

Question

我正在使用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> 

希望你能帮助我，谢谢

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