Cycle2插件- goto getSlideIndex

Question

我需要幻灯片有一个带有next按钮的旋转木马。旋转木马需要环绕，点击旋转木马中的每个缩略图，就需要更改主幻灯片(#幻灯片-1)。

next按钮只执行一项任务，即移动#幻灯片-2中的每个缩略图。它目前只有3个图像显示，但最终会有6个。

开箱即用，malsup的代码不允许包装，也不允许单击缩略图来更改主幻灯片。它只允许包装或不包装。(没有任何包装允许我点击一个拇指来改变它)

我引用这个页面：http://jquery.malsup.com/cycle2/demo/caro-pager.php

下面的代码是我添加点击事件以改变幻灯片#幻灯片-1的尝试。

而且，看起来幻灯片的数字是不一样的。我在我的控制台里得到了5个幻灯片号码。如果我能得到两个单独的幻灯片实例，它可能会帮助我。

如果有什么不清楚的话请告诉我。

    $(function(){

    var slideshow = $("#slideshow-1 #cycle-1");

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

<!-- Main Slideshow -->
<div id="slideshow-1">
    <div id="cycle-1" class="media_wrapper cycle-slideshow" 
        data-cycle-fx="fade" 
        data-cycle-timeout="0"
        data-cycle-slides="> div.media_slide">
        <!-- Choices -->
        <div class="media_slide">
            <!-- Video Link -->
            <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4">
                <div class="media_image">
                    <img src="images/slide1_clay.jpg" />
                </div>
            </a>
        </div>

        <!-- Choices -->
        <div class="media_slide">
            <!-- Video Link -->
            <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4">
                <div class="media_image">
                    <img src="images/slide2_person.jpg" />
                </div>
            </a>
        </div>

        <!-- Choices -->
        <div class="media_slide">
            <!-- Video Link -->
            <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4">
                <div class="media_image">
                    <img src="images/slide3_persons.jpg" />
                </div>
            </a>
        </div>
        <!-- /slideshow -->

    </div>
</div>

        <!-- Thumbnails -->
    <div id="slideshow-2">      
        <div id="cycle-2" class="thumbs cycle-slideshow" 
            data-cycle-fx="carousel" 
            data-cycle-carousel-vertical="true" 
            data-cycle-timeout="0"
    data-cycle-carousel-visible="3"
    data-cycle-carousel-fluid=true
    data-allow-wrap="true"
            data-cycle-slides="> div"
            data-cycle-next=".cntrl .cycle-next"    
            >

            <div><img class="item set_one" src="images/thum1_clay.jpg" width="209" height="127"/></div>
            <div><img class="item set_two" src="images/thum2_chris.jpg" width="209" height="127"/></div>
            <div><img class="item set_three" src="images/thum3_tom.jpg" width="209" height="127"/></div>

        </div>

        <div class="cntrl">         
       <!-- Remove class 'none' when more slides are added -->
       <a href="#" class="cycle-next">Next &raquo;</a>
    </div>

    </div>

谢谢!

Answer 1

通过添加几行jquery解决了我的问题。

• 检查循环旋转木马是否已到达终点(有.disabled类)。
• 转到幻灯片0(基于0)并将旋转木马推回顶部。
• 确保所有幻灯片都是可见的。

$(".cycle-next").click(function(){
   if ($(".cycle-next").hasClass('disabled')) {

   // Manually go to go the begining of the slideshow
   $(".cycle-slideshow").cycle('goto', 0);
   // Push carousel to first slide
   $(".cycle-carousel").animate({
      top: 0
   },1500);

  $(this).removeClass("disabled");

  $(".cycle-slide").css('opacity','1');
}
});

Answer 2

我用你的代码对“循环-prev”和“循环-下一步”链接进行了轻微的修改。由于某种原因，当循环-prev链接触发一个.cycle('goto',5)时，因为旋转木马中有6个元素，插件将暂时添加，然后从循环中删除“禁用”类--下一个锚。即使我手动添加类，它也会立即被移除，从而使‘循环-下一个’事件处理程序毫无用处。

这是我的一文不值代码。

            $("a.cycle-next").click(function(){
                if ($("a.cycle-next").hasClass('disabled')) {
                    $(this).removeClass("disabled");
                    $(".slideshow").cycle('goto', 0);
                }
            });

            $("a.cycle-prev").click(function(){
                if ($("a.cycle-prev").hasClass('disabled')) {
                    $("a.cycle-next").addClass("disabled");
                    $(this).removeClass("disabled");
                    $(".slideshow").cycle('goto', 5);
                }
            });

如果这是以错误的方式发布的话，请随意给我大便。