So passen Sie die Beschriftung der bxlsider

Question

Ich muss die Beschriftung mit im Bild des Schiebereglers hinzufügen und müssen jeden Schieberegler verschieben, wenn Sie die entsprechenden Beschriftungen angeklickt. wahr in JavaSript, aber immer noch die Beschriftungen außerhalb des images.And Ich brauche die Beschriftungen anpassen und ersetzen Sie sie als Text für die sliders.I angebracht haben ein Beispielbild unten zu erklären:

Ich habe die Beschriftungen hinzugefügt was ich brauche. Ich habe meinen Code ebenfalls angehängt.

Welche Änderungen muss ich an meinem Code vornehmen, um Untertitel wie diese zu erhalten.

<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

Sie sollten einen figure-Tag mit einem figcaption innerhalb Ihrer li Listenelemente, aber sie arbeiten hinzuzufügen. (Ich nehme an, Sie könnten eine Spannweite entweder? .. nur daran gedacht)

Wenn Sie opt, um die span zu verwenden, müssen Sie display:block; auf die CSS hinzufügen.

Die figcaption mit dem Beschriftungstext sollte innerhalb des Abbildungstags enthalten sein. Span-Tags sollten vor dem Ende des Schließ </li>

Zum Beispiel enthalten sein (ich habe verwendet figcaption hier)

$('.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>

die Hintergrundfarbe/padding/margin Größen sind nur für Beispiel bearbeiten, wie Sie sehen, passen ..

hoffe, das hilft

Fiddle