Cycle2 plugin - goto getSlideIndex

Question

Мне нужно мое слайд-шоу, чтобы иметь карусель с next button. Карусельного нужно обернуть вокруг и нажав каждый эскиз в карусели необходимо изменить Main слайд-шоу (# слайд-шоу-1)

следующий кнопка выполняет только одну задачу, которая должна перемещаться по каждой миниатюры в # слайд-шоу-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 запускает цикл .cycle ('goto', 5) [потому что в каруселях есть 6 элементов], плагин кратковременно добавляет, а затем удаляет класс 'disabled' из цикла-следующего якоря , Даже если я добавляю класс вручную, он мгновенно удаляется, тем самым делая бесполезным обработчик событий «цикл-следующий».

Вот мой бесполезный код.

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

Не стесняйтесь приносить мне дерьмо, если это опубликовано неправильно.