Owlcarousel2: Extending animateIn and animateOut with direction

Created on 9 Feb 2018  路  4Comments  路  Source: OwlCarousel2/OwlCarousel2

Hi, this plugin is great! I love playing with custom animations with animateIn and animateOut options. However, I have some ideas to extend these options so the plugin will be super awesome for custom animations :)

1-) It is currently direction agnostic, same animation for navigating forward or backward. Check out this example. Click on the left arrow and see how animation is being reversed when navigating backward. In order to achive this we need 4 options (2 more actually) like; forwardAnimateIn - forwardAnimateOut - backwardAnimateIn - backwardAnimateOut .

2-) that 4 new options may accept an array of strings instead of a single value and apply this classes in order or randomly to create random animation behavior again as in the example above.

3-) That might be a little too much but gotta ask :) How about handling animations the same way in the above example; "to see a continuous flow, keep your mouse down on the navigation arrows."

Btw, I had to add the CSS below to fix some issues with custom animations; removing overflow of stage and make all slides position on a stack, not horizontal slides;

.owl-carousel.custom-animation .owl-stage {
    width: 100% !important; transform: none !important;
    }
.owl-carousel.custom-animation .owl-item {
    opacity: 0; z-index: 10; position: absolute; left: 0 !important;
    }
.owl-carousel.custom-animation .owl-item.active {
    opacity: 1; z-index: 12;
    }
.owl-carousel.custom-animation .owl-animated-out {
    z-index : 15; 
    }

Thanks for this great plugin again!

feature request help wanted

Most helpful comment

I would love to see this merged soon. The same custom animation for previous and next slides is annoying. 馃槈

All 4 comments

Hey @ahmetsali ,

you can feel free to submit a pull request for this feature 馃憤, this is a "nice-to-have" but not something that we plan to implement on our own soon. If you are willing to submit a PR for this kind of feature feel free, I will gladly review it.

@pascalporedda ok, I just submitted a pull request;

https://github.com/OwlCarousel2/OwlCarousel2/pull/2217

thanks.

@ahmetsali Thank you, I will take care of this in the upcoming days. Gotta fix the Travis CI first.

I would love to see this merged soon. The same custom animation for previous and next slides is annoying. 馃槈

Was this page helpful?
0 / 5 - 0 ratings

Related issues

garethjenkinsit picture garethjenkinsit  路  4Comments

mkraha picture mkraha  路  4Comments

shamimsaj picture shamimsaj  路  3Comments

siwel picture siwel  路  3Comments

leecollings picture leecollings  路  3Comments