Home Forums Air HTML Theme How do I change Owl Carousel transitions?

This topic contains 4 replies, has 2 voices, and was last updated by  SeaTheme 2 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #12702

    floodout
    Participant
    Purchased

    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

    #12703

    SeaTheme
    Keymaster
    Purchased
    Supported

    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:

    How do I change Owl Carousel transitions

    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

    Owl carousel Slider in SEA Creative Multi-Purpose WordPress Theme

    Regards!
    Bwsm – Professional WordPress Theme Studio
    uiueux.com

    #12713

    floodout
    Participant
    Purchased

    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,

    #12732

    floodout
    Participant
    Purchased

    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;
    }

    #12734

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!