iDangerous Slider在圖像上顯示文字

我使用iDangerous滑塊來顯示一個廚房，除此之外，我想在每個圖像上顯示一個描述，但是我無法得到它。iDangerous Slider在圖像上顯示文字

我試過從圖像設置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>

我希望你能幫助我，謝謝

來源

2013-09-25 Lenin Ocaña

您標記了Jquery ...！你的Js在哪裏我的意思是你的Idangerous插件調用fucntion或者你的CSS ..？否則你的鏈接你試試..？你給的上面的東西是無望的答案..！ – 2013-09-25 05:38:06

謝謝Vikranth，我剛剛通過添加javascript和css代碼更新了我的文章。 –

添加一個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-24 10:47:27

iDangerous Slider在圖像上顯示文字

回答

相關問題