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

Можно ли выделить текущие элементы в карусели 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 или цикл for, чтобы это сделать.

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


person Caspert    schedule 24.10.2015    source источник
comment
это ваш плагин flexslider.woothemes.com/basic-carousel.html?   -  person Kishore Sahasranaman    schedule 24.10.2015
comment
@KishoreSahas Да, я использую. Я бы хотел добавить активный класс к каждому слайду во вьюпорте. Я обновляю свой пост о моем прогрессе прямо сейчас ..   -  person Caspert    schedule 24.10.2015
comment
попробуй это . jsfiddle.net/kishoresahas/a2jro8vt/1   -  person Kishore Sahasranaman    schedule 24.10.2015
comment
попробуйте заменить ссылку на изображение. .. или лучше попробуйте логику в своем коде ..   -  person Kishore Sahasranaman    schedule 24.10.2015


Ответы (2)


используйте события 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>

ДЕМО

person Kishore Sahasranaman    schedule 24.10.2015
comment
попробуйте это ... jsfiddle.net/kishoresahas/a2jro8vt/8 .. обновить ответ также .. - person Kishore Sahasranaman; 24.10.2015
comment
Еще одна вещь, есть ли способ, если длина карусели нечетная, а ползунок находится на последнем слайде, таком как индекс 4, выделить предыдущий? Теперь он выделяет только индекс 4, но если есть возможность выделить также индекс 3, если 4 является нечетным, было бы очень хорошо. - person Caspert; 24.10.2015

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

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

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');
  }
};
person Typhado    schedule 09.06.2017