iDangerous Slider показать текст над изображением

Question

Я использую ползунок iDangerous, чтобы показать галеру, рядом с этим я хочу показать описание каждого изображения, но я не могу этого понять.

Я попытался установить z-индекс из изображений в низкое значение и значение z-индекса из .swiper-slide .title в большое число. Вот мой код:

Название

Субтитры

Fluid-Mode Enabled

При отпускании слайд, он двигаться на некоторое время

Slide 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 до пользовательской логики.