CODEWITHSUNDEEP
htmlcsstimerslider
Francisco Iniguez
Francisco Iniguez

Reputation: 65

Changing duration of text in slider

A client has a website that has an automatic slider on main page, currently each slide lasts about 3 seconds but want to change this to at least 5 seconds as slides change too quickly and don't give enough time to read text.

This is a purchased template in html so it's already working, would just need to know what to look for or add in css file.

HTML.

<section class="hero-fullscreen parallax overlay bg-img-1">  
        <div class="hero-container">  
            <div class="hero-content">   

                <div class="content-slider container">

                    <div class="white">
                        <h5 class="subheading">We set you apart from the competition.</h5>
                        <h1 class="large mt20">Have your own marketing <br> team starting from $$$ a month.</h1>
                        <hr class="separator mb30">   
                        <p class="mb60">We create, manage &amp; update your online presence, so you can focus on your business.</p>
                    </div>

CSS.

.content-slider.owl-carousel .owl-item,
.content-slider.owl-carousel  .owl-item:active {
cursor: default;
}
 .owl-animated-in {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.owl-item p, .owl-item h5, .owl-item h1 {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, 
.animated.flipOutY {
animation-duration: 0.6s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

Upvotes: 0

Views: 490

Answers (1)

Francisco Iniguez
Francisco Iniguez

Reputation: 65

Ok so looks like there is a script.js file, maybe it wont apply to everyone but Jackson was on the right track.

There's a javascript file with the following section:

$(".content-slider").owlCarousel({
    animateOut: 'bounceOut',
    animateIn: 'bounceIn',
    autoplay: true,
    autoplayTimeout: 7500, <--------- Just change this number.
    items: 1,
    dots: false,
    mouseDrag: false,
    touchDrag: false,
    loop: true
});

Upvotes: 1

Related Questions