php - bxslider でデフォルトとカスタムのページャーを表示する方法

Question

bxスライダーのカスタムページャーを使用しようとすると、上部のデフォルトのページャーが表示されませんでした。bxsliderに両方のページャーオプションを表示するのを手伝ってくれる人はいますか

Answer 1

私のコードでは、デフォルトのページャーを使用し、の助けを借りてサムネイルをJQuery設計bubble-wrapper classしました.

サムネイルには画像が含まれ、画像とスライダーをクリックするとその画像が表示されます。

これを達成するために私は使用しましたslider.goToSlide(slideNumber,"direction");

方向は「prev」/「next 」で、使用したslideNumberを決定するために使用できdata-bubbleます。

<div class="bubble-wrapper">
    <ul>
        <li><a class="bubble" data-bubble="0"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="1"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="2"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="3"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
    </ul>
</div>

<script>
var slider = $('.bxslider').bxSlider();
$('a.bubble').click(function () {
    var bubbledSlide=$(this).attr("data-bubble");
    console.log("bubbledSlide"+bubbledSlide);
    slider.goToSlide(bubbledSlide,'prev');
});
</script>