如何自定義標題的bxlsider

Question

我需要在滑塊的圖像中添加標題，並且必須在單擊相應標題時移動每個滑塊。

我已經添加了字幕：在javasript真正，但仍字幕是images.And外面我需要定製的字幕和替換它們作爲文本的sliders.I附上下面的樣本圖像來解釋我需要的。我也附加了我的代碼。

我必須對我的代碼做些什麼更改才能獲得像這樣的標題。

<ul class="bxslider"> 
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li> 
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li> 
</ul> 

<script> 
    $(document).ready(function(){ 
     $('.bxslider').bxSlider(); 

    }); 

    $('.bxslider').bxSlider({ 
     mode: 'horizontal', 
     infiniteLoop: true, 
     auto: true, 
     autoStart: true, 
     autoDirection: 'next', 
     autoHover: true, 
     pause: 3000, 
     autoControls: false, 
     pager: true, 
     pagerType: 'full', 
     controls: true, 
     captions: true, 
     speed: 1200, 
     slideWidth: 800 
    }); 
</script> 

Answer 1

您應該添加figure標籤與li列表項中的figcaption，但他們的工作。 （我想你可以添加一個跨度？..只是想到這一點）

如果您選擇使用添加跨度，您需要將display:block;添加到CSS。

帶有標題文字的figcaption應包含在數字標籤內。跨度標籤應包括前收盤</li>

例如結束（這裏我用figcaption）

$('.bxslider').bxSlider({ 
 
    auto: true, 
 
    autoControls: true 
 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.bxslider li img { 
 
    width: 200px; 
 
    height: 125px; 
 
    margin: 0px 5px; 
 
    padding: 10px 3px; 
 
} 
 

 
.bxslider { 
 
    list-style-type: none; 
 
} 
 

 
.bxslider li { 
 
    display: inline-block; 
 
} 
 

 
figcaption { 
 
    padding: 0!important; 
 
    margin: 0!important; 
 
    color: #2F4F4F; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
figure:hover, 
 
figcaption:hover { 
 
    color: forestgreen; 
 
    background-color: yellow; 
 
} 
 

 
figure:active, 
 
figcaption:active { 
 
    color: forestgreen; 
 
    background-color: blue; 
 
}

<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> 
 
<script src="http://bxslider.com/js/jquery.min.js"></script> 
 
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script> 
 

 
<ul class="bxslider"> 
 
    <li> 
 
    <figure><img src="http://www.rachelgallen.com/images/daisies.jpg" /> 
 
     <figcaption>Daisies</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure><img src="http://www.rachelgallen.com/images/snowdrops.jpg" /> 
 
     <figcaption>Snowdrops</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure><img src="http://www.rachelgallen.com/images/mountains.jpg" /> 
 
     <figcaption>Mountains</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" /> 
 
     <figcaption>Yellow Flowers</figcaption> 
 
    </figure> 
 
    </li> 
 
</ul>

背景顏色/填充/保證金大小隻是例如，編輯，因爲你看到適合..

希望這可以幫助

Fiddle