How do I change Owl Carousel transitions?

[floodout]

I am using the home8.html. I want my 1400×800 pics to flash on quickly, not slide in from the side. I also want to hide the circles down the bottom. How do I do this?
Thanks

Answer:

The owl-carousel function is called by the jQuery codes element.owlCarousel({...}), like

$('.owl-causouel').owlCarousel({
    margin: _margin,
    loop: _loop,
    autoWidth:_autoW,
    center: _center,
    animateIn: _animateIn,
    animateOut: _animateOut,
    ...
    autoplay: _auto,
    autoplayTimeout:5000,
    responsiveClass:true,
    navText:["",""],
    slideBy:_slideby,
    dots:_showdot, 
    nav:_shownav,
    ...
});

You would see the 2 options:

autoplay:true,
autoplayTimeout: 5000,

The autoplayTimeout option is for transitions, the 5000 means 5 seconds. If you want to increase as 9 seconds, change 5000 as 9000.

The autoplay option should be true.

——–AD———
The User-friendly Owl Carousel slider editor in the ART WordPress theme

[SeaTheme]

Hi,

1) The owl-carousel function is called by the jQuery codes element.owlCarousel({...}), like in Air theme:

_carousel.owlCarousel({
    margin: _margin,
    loop: _loop,
    autoWidth:_autoW,
    center: _center,
    animateIn: _animateIn,
    animateOut: _animateOut,
    ...
    autoplay: _auto,
    autoplayTimeout:5000,
    responsiveClass:true,
    navText:["",""],
    slideBy:_slideby,
    dots:_showdot, 
    nav:_shownav,
    ...
});

You will find the codes in js/custom.theme.js:

You would see the 2 options:

autoplay:true,
autoplayTimeout: 5000,

The autoplayTimeout option is for transitions, the 5000 means 5 seconds. If you want to increase as 9 seconds, change 5000 as 9000.

The autoplay option should be true.

2) To hide the navigation dot, set the dots option as:
dots: false,

If you want to change the slide effect as fadein-fadeout effect, please set the 2 options:

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

PS:
There is a user-friendly Owl Carousel slider editor in the SEA WordPress theme

Regards!
Bwsm – Professional WordPress Theme Studio
uiueux.com

[floodout]

thankyou, yes the way I solved it was like this:

animateIn: ‘fadeIn’,
animateOut: ‘fadeOut’,

to change transition from a slide to an appear.

And i also changed the dot to:

dots:false,

[floodout]

Hello again,

Because i am looking for a flashing gif affect on my home page, I have changes the webkit animation to be

.owl-carousel .animated {
-webkit-animation-duration: 50ms;
animation-duration: 50ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

This is giving me the affect I want but is now also affecting other fullscreen sliders, for example on the project page.
How do i create a webkit animation that is specifically for the first page only.

for example if i added a ‘B’ where else in the documentation would i need to add this ‘B’ to only affect the opening owl carousel. Forgive me but i don’t know the basics of CSS, i’m a newbie

.owl-carousel .animatedB {
-webkit-animation-duration: 50ms;
animation-duration: 50ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

[SeaTheme]

please add a parent class name top-slider, like:

.top-slider .owl-carousel .animated {
-webkit-animation-duration: 50ms;
animation-duration: 50ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

It will not work for single project slider.

[Author]

Posts