Displaying a carousel on clicking each link - using Jquery and OwlCarousel

Question

I have 3 carousels, and i'm trying to display each carousel on clicking a respective link, using jquery.

When i add the css "display: none" to a div, the owl carousel does not quite behave correct. The size of the carousel elements shrink, and sometimes disappear.

I have made a jsfiddle for it, i'd appreciate your help in finding what is going wrong - https://jsfiddle.net/prtkvarma/yLjw7gsk/3/

Thanks.

Following is just the JS part of the code -

jQuery(document).ready(function($) {

  $('.owl-one').owlCarousel({
    items: 4,
    lazyLoad: true,
    margin: 20,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 2
      },
      480: {
        items: 3
      },
      786: {
        items: 4
      }
    }
  });

  $('.owl-two').owlCarousel({
    items: 4,
    lazyLoad: true,
    margin: 20,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 2
      },
      480: {
        items: 3
      },
      786: {
        items: 4
      }
    }
  });

  $('.owl-three').owlCarousel({
    items: 4,
    lazyLoad: true,
    margin: 20,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 2
      },
      480: {
        items: 3
      },
      786: {
        items: 4
      }
    }
  });

    /*Change css of links on click*/
  $('.select-link li').click(function() {
    $('.select-link li').removeClass('active-link');
    $(this).addClass('active-link');
});

/*showing/hiding particular carousels on clicking links*/
  $('.link-promotions').click(function() {
    $('.sec-casino-games').hide();
    $('.sec-live-odds').hide();
    $(".sec-promotions").show(1000);
    $(".pic1, .pic2, .pic3, .pic4").hide('slow');
  });

  $('.link-casino-games').click(function() {
    $('.sec-promotions').hide();
    $('.sec-live-odds').hide();
    $(".sec-casino-games").show(1000);
    $(".pic1, .pic2, .pic3, .pic4").hide('slow');
  });

  $('.link-live-odds').click(function() {
    $('.sec-promotions').hide();
    $('.sec-casino-games').hide();
    $(".sec-live-odds").show(1000);
    $(".pic1, .pic2, .pic3, .pic4").hide('slow');
  });

});

score 1 · Accepted Answer · answered Sep 16 '17 at 02:09

You typically want to stay away from built in special effects that hardcode inline styles on elements that leverage libraries that are heavy on visual user experience. The reason for this is because the jQuery built in special effects all change the style attribute of the element directly, which will typically clash with library CSS rules.

I've taken the liberty to rewrite most of your jQuery to be simpler, less redundant, and streamlined. The main thing, to answer your question, is to leverage the .addClass() method, which allows you to .animate() add classes to your element, much like that same manner that .hide() does. This is done by adding time in milliseconds as second parameter when using the .addClass() method.

jQuery

jQuery(document).ready(function($) {
    $('.owl-carousel').each(function(index, element) {
        jQuery(element).owlCarousel({
            items: 4,
            lazyLoad: true,
            margin: 20,
            nav: true,
            dots: false,
            responsive: {
                0: {
                    items: 4
                }
            }
        });
    });

    var owl_content = jQuery('.owl-carousel');
    var owl_links = jQuery('.select-link a');

    jQuery(owl_links).each(function(index, element) {
        jQuery(element).click(function(e) {
            jQuery(owl_content).each(function(i, el) {
                jQuery(el).addClass('c', 500);
                if (i === index) {
                    jQuery(owl_content[index]).removeClass('c', 500);
                    console.log(i);
                }
            });
        });
    });

    /*Change css of links on click*/
    $('.select-link li').click(function() {
        $('.select-link li').removeClass('active-link');
        $(this).addClass('active-link');
    });

    jQuery('.c.first').removeClass('c');
});

Fiddle

https://jsfiddle.net/dixalex/yLjw7gsk/8/

Sources

animating addClass/removeClass with jquery

Hi can u please look at https://stackoverflow.com/questions/52745950/owl-carousel-is-showing-only-once-unable-to-see-owl-carousel-from-the-second-t and suggest me some way .. @Alexander Dixon — Roster, Oct 11 '18 at 12:12

Displaying a carousel on clicking each link - using Jquery and OwlCarousel

1 Answers1