Изменение длительности текста в слайдере - PullRequest
0 голосов
/ 03 октября 2019

У клиента есть веб-сайт с автоматическим слайдером на главной странице, в настоящее время каждый слайд длится около 3 секунд, но он хочет изменить его как минимум на 5 секунд, так как слайды меняются слишком быстро и не дают достаточно времени для чтения текста.

Это купленный шаблон в формате html, поэтому он уже работает, просто нужно знать, что искать или добавить в файл CSS.

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

1 Ответ

1 голос
/ 03 октября 2019

Хорошо, похоже, что есть файл script.js, возможно, он не применим ко всем, но Джексон был на правильном пути.

Есть файл javascript со следующим разделом:

$(".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
});
...