C
C
cache02017-03-18 19:25:23
css
cache0, 2017-03-18 19:25:23

How to add class active to current active element reference in owl carousel 2?

here is the pen codepen.io/cache0/pen/JWMNge
here is the code

jQuery(document).ready(function($) {
  var owlBen = $(".binefits_slider.owl-carousel");

  owlBen.on('initialized.owl.carousel', function(event) {
    $.each($('.owl-item'), function(i) {
      var paginatorsLink = $('.ben_page');

      $(paginatorsLink[i])
        // i - counter
        // Give some styles and set background image for pagination item
        .css({
          'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
          'background-size': 'cover'
        })
        // set Custom Event for pagination item
        .click(function() {
          owlBen.trigger("to.owl.carousel", i);
        });

    });

  });

  owlBen.owlCarousel({
    // Most important owl features
    items: 1,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    loop: true,
    dots: false,
    nav: false,
    callbacks: true,
    autoplay: true,

  });
});

By the way, pagination links are custom

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Evgeny Kravchenko, 2017-03-18
@evgenyj_kravchenko

$(...).addClass('active');
not?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question