Как выделить активные слайды в карусели Flexslider?

Question

Можно ли выделить текущие элементы карусели Flexslider, чтобы я мог добавить класс к активным?

Я использую базовую настройку карусели Flexslider. Теперь я хотел бы иметь скрипт, который будет добавлен к каждому слайду внутри видимого окна.

В этом примере я использую: http://flexslider.woothemes.com/basic-carousel.html

я теперь, как получить свойства FlexSlider в функции запуска. Когда я даю функции параметр, который я могу запросить - общее количество элементов в ul, сколько предметов он будет перемещать и сколько будет отображаться подкачки. Я не знаю, можно ли написать формулу, чтобы вычислить, какая из них активна с заданными переменными, поэтому я могу выделить их.

$('.flexslider').flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     slideshow: false, 
     itemWidth: 460, 
     itemMargin: 30, 
     minItems: 2, 
     maxItems: 6, 
     controlNav: false, 
     customDirectionNav: ".custom-direction li a", 
     start: function(slider) { 
      var pagingCount = slider.pagingCount; 
      var move = slider.move; 
      var visibleSlides = slider.visible; 
      var totalSlides = slider.count; 

      console.log(slider); 
      console.log(slider.move); 
      console.log(slider.update); 


      if (totalSlides) { 
       $('.slides li').addClass('active-slides'); 

      }; 
      // console.log(slider.count); 
      // console.log(slider.currentSlide); 
     } 

    }); 

Я начал, но не знаю, как должно выглядеть выражение if или цикл, чтобы это сделать.

Любые идеи? Спасибо заранее.

Answer 1

использовать события start и «после», чтобы справиться с этим. см. приведенный ниже пример.

$('.flexslider').flexslider({ 
 
    animation: "slide", 
 
    animationLoop: false, 
 
    slideshow: false, 
 
    itemWidth: 460, 
 
    itemMargin: 30, 
 
    minItems: 2, 
 
    maxItems: 6, 
 
    controlNav: false, 
 
    customDirectionNav: ".custom-direction li a", 
 
    start: function (slider) { 
 
     window.addCurrentSlidesClass(slider); 
 
    }, 
 
    after: function (slider) { 
 
     window.addCurrentSlidesClass(slider); 
 
    } 
 
}); 
 

 
window.addCurrentSlidesClass = function (slider) { 
 
    //debugger; 
 
    $('.flexslider li').removeClass("active-slides"); 
 
    var startli = (slider.move * (slider.currentSlide)); 
 
    var endli = (slider.move * (slider.currentSlide + 1)); 
 
    for (i = startli + 1; i <= endli; i++) { 
 
     $('.flexslider li:nth-child(' + i + ')').addClass('active-slides'); 
 
    } 
 
}

<div class="flexslider carousel"> 
 
    <div class="flex-viewport" style="overflow: hidden; position: relative;"> 
 
     <ul class="slides" style="width: 2400%; transition-duration: 0.6s; transform: translate3d(0px, 0px, 0px);"> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_lemon.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_donut.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_caramel.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_lemon.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_donut.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_caramel.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_lemon.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_donut.jpg" draggable="false"> 
 
      </li> 
 
      <li style="width: 210px; float: left; display: block;"> 
 
       <img src="images/kitchen_adventurer_caramel.jpg" draggable="false"> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <ol class="flex-control-nav flex-control-paging"> 
 
     <li><a class="flex-active">1</a> 
 

 
     </li> 
 
     <li><a class="">2</a> 
 

 
     </li> 
 
     <li><a class="">3</a> 
 

 
     </li> 
 
    </ol> 
 
    <ul class="flex-direction-nav"> 
 
     <li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a> 
 

 
     </li> 
 
     <li class="flex-nav-next"><a class="flex-next" href="#" tabindex="-1">Next</a> 
 

 
     </li> 
 
    </ul> 
 
    <div class="flex-pauseplay"><a class="flex-pause">Pause</a> 
 

 
    </div> 
 
</div>

DEMO

Answer 2

Используется принятый ответ выше, но необходимо, чтобы сделать пару изменений, чтобы заставить его работать на меня показано ниже.

В основном обработка некоторых исключений, имеющих половину показанных слайдов, и когда перемещение/видимость различны.

window.addCurrentSlidesClass = function (slider) { 
    jQuery('.flexslider li').removeClass("active-slide"); 

    // get visible by math rather than slider variable due to half shown slides not counting 
    // var visible = slider.visible; 
    var visible = Math.ceil(slider.w/slider.itemT); 

    var startli = (slider.move * (slider.currentSlide)); 
    // var endli = (slider.move * (slider.currentSlide + 1)); 
    var endli = startli + visible; 

    // Don't push past when you reach end of list 
    if(endli > slider.count) { 
    startli = startli - (endli - slider.count); 
    endli = endli - (endli - slider.count); 
    } 

    for (i = startli + 1; i <= endli; i++) { 
    jQuery('.flexslider li:nth-child(' + i + ')').addClass('active-slide'); 
    } 
};