Fade in and out owl carousel effect not working

Question

    <script>
    $(document).ready(function () {
          $("#owl-demo").owlCarousel({
              navigation: true,
              navigationText: ["", ""],
              slideSpeed: 300,
              paginationSpeed: 400,
              autoPlay: true,
              mouseDrag: true,
              singleItem: true,
              animateIn: 'fadeIn',
              animateOut: 'fadeOut'
          });
      });
    </script>

Above is my owl carousel quote, i want to have the fade in and out effect but it doesnt seems to appear. Instead it appears as sliding effect.

Jai · Answer 1 · 2018-10-22T08:10:28.470

21

I don't think there is any option for fade transition:

transitionStyle: "fade" // not available in the docs

another option is to use animate.css in conjunction with it:

$("#owl-demo").owlCarousel({
  navigation: true,
  navigationText: ["", ""],
  slideSpeed: 300,
  paginationSpeed: 400,
  autoPlay: true,
  mouseDrag: true,
  singleItem: true,
  animateIn: 'fadeIn', // add this
  animateOut: 'fadeOut' // and this
});

edited Oct 22 '18 at 08:10

answered Nov 19 '15 at 08:49

Jai

74,255
12
74
103

1

I tried and the effect came out as sliding effect instead, – itnotsopro Nov 19 '15 at 09:06
2

if you could put a demo, that would be a help to answer it properly. – Jai Nov 19 '15 at 09:07
@user9437856 It is a delayed response but please find the updated link. – Jai Oct 22 '18 at 08:11

Benjamin · Answer 2 · 2018-06-26T07:19:33.493

7

Interesting would be which version you are using.. Your code example mixes up options from versions 1.3.* and 2.*.

Since version 2.* you need:

animateIn: 'fadeIn',
animateOut: 'fadeOut',

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

In version 1.3.* you need:

transitionStyle: "fade"

http://www.landmarkmlp.com/js-plugin/owl.carousel/#customizing

edited Jun 26 '18 at 07:19

answered Feb 17 '16 at 14:12

Benjamin

1,067
20
30

Links are expired – Mohammad Ayoub Khan Jun 25 '18 at 01:04
@Benjamin, Can you make a jsfiddle or code pan? because I tried but it's not working – user9437856 Oct 18 '18 at 07:44

score 1 · Answer 3 · answered Jun 25 '18 at 13:34

1

animateIn: 'fadeIn', animateOut: 'fadeOut',

Will Work version - Owl Carousel v2.2.1

answered Jun 25 '18 at 13:34

Mr. Sen

11
2

use latest version, and add animate.css and use these links to get more help https://owlcarousel2.github.io/OwlCarousel2/docs/dev-external.html – Mohammad Ayoub Khan Jun 29 '18 at 07:26
http://www.landmarkmlp.com/js-plugin/owl.carousel/demos/transitions.html – Mohammad Ayoub Khan Jun 29 '18 at 07:27

score 0 · Answer 4 · edited Jun 03 '22 at 06:44

0

For latest version of Owl Carousel(Version2.3.4) just use:

animateOut: 'fadeOut',

edited Jun 03 '22 at 06:44

4b0

21,981
30
95
142

answered Jun 03 '22 at 06:41

Gʋɗɗʋ Aŋsʌʀɩ

1
1

Fade in and out owl carousel effect not working

4 Answers4