Question

我正在使用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">•</span><span>•</span><span>•</span><span>•</span><span>•</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 + ')';
    }
});

Answer 1

我希望您正在寻找与此demo

类似的内容

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 website

上找到上述小提琴代码

你可以提供这个小提琴吗？

pagerAnchorBuilder - 尝试添加类

1 个答案: