2

Iam currently trying to use owl carousel 2 with fade effect but it shows default swipe effects insted.How can I fix it.

Here,s my code 

  function owlWrapperWidth( selector ) {
  $(selector).each(function(){
    $(this).find('.owl-carousel').outerWidth( $(this).closest( selector ).innerWidth() );
  });
}

owlWrapperWidth( '.owl-wrapper' );
$( window ).resize(function() {
  owlWrapperWidth( $('.owl-wrapper') );
});

$('.owl-carousel').owlCarousel({ animateOut: 'fadeOut',

    animateIn: 'fadeIn',
  nav:true,  





    loop: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },     
      1000: {
        items: 3,
        slideBy:3,
      }
    }
  });

I have added animateIn:'fadeIn' but no success at all

Thanks

sunilkjt
  • 985
  • 4
  • 12
  • 21

1 Answers1

4

Owl animate functions only work on "single item" carousels (only shows one slide at a time):

"Animate functions work only with one item and only in browsers that support perspective property."

see here: http://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

here is one of my current slider implementations using the fadeIn and fadeOut accordingly, and by all accounts your code looks correct for the core owl and this works well.

$('.index-gallery .owlcarousel').owlCarousel({
  themeClass: 'owl-fullscreen owl-nonav white owl-loaded',
  autoplay:true,
  autoplayTimeout: 4000,
  items:1, // items to display in slider
  //margin:0, // margin(px) on item.
  //LOOP? - IF ONLY ONE SLIDE SEE: https://github.com/smashingboxes/OwlCarousel2/issues/548
  loop:true, // Inifnity loop. Duplicate last and first items to get loop illusion. 
  navRewind:true, // Go to first/last.
  nav:true, // left and right arrows
  autoHeight: true,
  navContainerClass: 'owl-buttons',
  dotsClass: 'owl-pagination',
  dotClass: 'owl-page',
  animateOut: 'fadeOut',
  animateIn: 'fadeIn',
  autoplayHoverPause:true, //false
  lazyLoad: false, // IMG need special markup class="lazyOwl" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img"
  dots:false // true
});

you may wish to see this thread for further advice / solutions / ideas:

Owl Carousel fade effect not working

Bigego
  • 41
  • 1
  • 7