jquery - owl carousel 2 fade effect not working -
iam trying use owl carousel 2 fade effect shows default swipe effects insted.how can fix it.
here,s 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' no success @ all
thanks
owl animate functions work on "single item" carousels (only shows 1 slide @ time):
"animate functions work 1 item , in browsers support perspective property."
see here: http://owlcarousel2.github.io/owlcarousel2/demos/animate.html
here 1 of current slider implementations using fadein , fadeout accordingly, , accounts code looks correct core owl , works well.
$('.index-gallery .owlcarousel').owlcarousel({ themeclass: 'owl-fullscreen owl-nonav white owl-loaded', autoplay:true, autoplaytimeout: 4000, items:1, // items display in slider //margin:0, // margin(px) on item. //loop? - if 1 slide see: https://github.com/smashingboxes/owlcarousel2/issues/548 loop:true, // inifnity loop. duplicate last , first items loop illusion. navrewind:true, // go first/last. nav:true, // left , 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" , data-src="url_to_img" or/and data-src-retina="url_to_highres_img" dots:false // true });
you may wish see thread further advice / solutions / ideas: