Question

我需要我的幻灯片显示带有下一个按钮的旋转木马。旋转木马需要环绕并点击旋转木马中的每个缩略图需要更改主幻灯片（＃slideshow-1）

下一个按钮只执行一项任务，即在＃slideshow-2 中浏览每个缩略图。它目前只有3个图像显示，但最终会有6个。

开箱即用，来自malsup的代码不允许换行，也无法点击缩略图来更改主幻灯片。它只允许包装或不包装。（没有包装可以让我点击拇指来改变这个）

我正在引用此页面： http://jquery.malsup.com/cycle2/demo/caro-pager.php

以下代码是我尝试添加点击事件以更改＃slideshow-1中的幻灯片。

此外，幻灯片编号看起来不一样。我在我的控制台中总共得到5个幻灯片号码。如果我可以获得一些如何获得2个单独的幻灯片实例，它可能会帮助我。

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

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

Vache，我使用了你的代码，稍微修改了两个＆＃39; cycle-prev＆＃39;和＆＃39;周期 - 下一步＆＃39;链接。出于某种原因，当cycle-prev链接触发。循环（＆＃39; goto＆＃39;，5）[因为旋转木马中有6个元素]时，插件会暂时添加，然后删除＆＃39;禁用＆＃39;循环下一个锚的类。即使我手动添加该类，它也会立即被删除，从而呈现“下一个周期”。事件处理程序无用。

这是我毫无价值的代码。

            $("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);
                }
            });

如果以错误的方式发布，请随意给我一些东西。

Cycle2插件 - 转到getSlideIndex

2 个答案: