CODEWITHSUNDEEP
jquerysliderfadeinowl-carousel-2
sunilkjt
sunilkjt

Reputation: 1005

How to disable swipe effect in owl carousel 2?

I need to disable swipe effect on owl carousel 2 and add only fadeIn effect. How is it possible ?

I have tried this code but no luck at all.

animateOut: 'fadeIn',
animateIn: 'fadeout',
nav:true,

Thanks

Upvotes: 3

Views: 9798

Answers (3)

Uzair Rashid Tak
Uzair Rashid Tak

Reputation: 83

if you want to remove all the effects just add this

animateIn: 'false',

and it will remove it. now if you want to add fade-in or fade-out effect only or both add this code

animateOut: 'fadeOut', // for fade out only 
// add both if you want both effect
animateIn: 'fadeIn', //for fade in only

Upvotes: 0

Gapur
Gapur

Reputation: 81

mouseDrag: false,
touchDrag: false

Upvotes: 8

Ismail Farooq
Ismail Farooq

Reputation: 6837

You need to add some css see here

fadeOut value is the only built-in CSS animate style. However there are tons of additional CSS animations that you can use in Owl. Simply download animate.css library and you are ready to extend Owl with new fancy transitions.

So if you want to add just fade effect you need to add some css like this.

.animated {
    visibility:hidden;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
}

.owl-item.animated {
    visibility: visible;
}

Upvotes: 0

Related Questions