Cycle2 plugin - goto getSlideIndex

Question

I need my slideshow to have a carousel with a next button. The carousel needs to wrap around AND clicking each thumbnail in the carousel needs to change the Main Slideshow (#slideshow-1)

The next button only performs one task, which is to move through each thumbnail in #slideshow-2. It currently only has 3 images displaying but eventually there will be 6.

Out of the box, the code from malsup does not allow wrapping and the ability to click a thumbnail to change the main slideshow. It only allows either wrapping or no wrapping. ( no wrapping does allow me to click a thumb to change tho)

I am referencing this page: http://jquery.malsup.com/cycle2/demo/caro-pager.php

The code below is my attempt at adding the click event to change slides in #slideshow-1.

Also, it looks like the slide numbers are not the same. Im getting 5 slide numbers total in my console. If i could some how get 2 separate slide instances, it might help me out.

Let me know if anything is unclear.

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

thanks!

Answer 1

Vache, I used your code with slight modifications for both 'cycle-prev' and 'cycle-next' links. For some reason, when the cycle-prev link triggers a .cycle('goto',5) [because there are 6 elements in the carousel] the plugin is momentarily adding, then removing the 'disabled' class from the cycle-next anchor. Even if I add the class manually, it is instantly removed, thereby rendering the 'cycle-next' event handler useless.

Here's my worthless code.

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

Feel free to give me shit if this is posted in the wrong manner.

Answer 2

Solved my issue by adding a few lines of jquery.

• Check if cycle carousel has reached the end, (has class .disabled).
• Go to slide 0 (0 based) and push carousel back up to the top.
• Ensure all slides are visible.

 

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