0

Cycle2 を使用してカルーセル ギャラリーを作成していますが、ページャー ボタンのスタイル設定に関して少し問題が発生しました。私が収集したのは、Cycle2 がスライドごとに独自のページャー スパン タグを作成するということです。個々のクラスをスパンに割り当て、それに応じて css を変更できる限り、これは小さな問題です。

しかし、私はこれを機能させることができません。

TLDR: pagerAnchorBuilder を使用して、スパンごとに個別のクラスを作成できることを望んでいました。私はできません。ヘルプ。

元のマークアップ (Cycle2 より前) は次のようになります。

<div id ="sub-nav" class="sub-nav">
    <ul>
        <li><a id="available" class="available" href="#"></a></li>
        <li><a id="reliable" class="reliable" href="#"></a></li>
        <li><a id="use" class="use" href="#"></a></li>
        <li><a id="reports" class="reports" href="#"></a></li>
        <li class="last"><a id="software" class="software" href="#"></a></li>
    </ul>       
</div>

<div id="sliding-gallery" class="sliding-gallery home-content">
    <ul>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
    </ul>
    <span id="#prev" class="prev">Previous</span>
    <span id="#next" class="next">Next</span>                   
</div>

Cycle2 では次のようになります (span タグの追加に注意してください)。

<div id ="sub-nav" class="sub-nav">
    <ul>
        <li><a id="available" class="available" href="#"></a></li>
        <li><a id="reliable" class="reliable" href="#"></a></li>
        <li><a id="use" class="use" href="#"></a></li>
        <li><a id="reports" class="reports" href="#"></a></li>
        <li class="last"><a id="software" class="software" href="#"></a></li>
    </ul>
<span class="cycle-pager-active">•&lt;/span><span>•&lt;/span><span>•&lt;/span><span>•&lt;/span><span>•&lt;/span></nav>         
</div>

<div id="sliding-gallery" class="sliding-gallery home-content">
    <ul>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
    </ul>
    <span id="#prev" class="prev">Previous</span>
    <span id="#next" class="next">Next</span>                   
</div>

サイクル2

$('#sliding-gallery ul').cycle({ 
    fx:     'carousel',
    carouselVisible: 1,     
    speed:  'fast', 
    timeout: 10000,
    slides: '>li',      
    next:   '.next', 
    prev:   '.prev',
    pager:  '.sub-nav',
    pagerAnchorBuilder: function(idx, slide) { 
        return '.sub-nav span:eq(' + idx + ')';
    }
});
4

1 に答える 1

3

このデモに似たものを探していることを願っています

jQuery(document).ready(function($){

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    // advance the other slideshow
    slideshows.not(this).cycle('goto', opts.currSlide);
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});

});

また、 cycle2 Web サイトで上記のフィドル コードを見つけることができます。

これにフィドルを提供できますか？

于 2013-06-26T10:18:09.847 に答える