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  BWSM 2 months, 3 weeks ago.

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

    floodout
    Participant

    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

    BWSM
    Keymaster

    Hi

    1) Please refer this page to change the slide animation. The owl-carousel function call is in js/custom.theme.js

    owl slider code

    2) Did you talk the navigation dot?
    change the data-showdot as false within <div class="owl-carousel" ... data-showdot="true" ...

    Regards!

    #12713

    floodout
    Participant

    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

    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

    BWSM
    Keymaster

    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.