speed problem with owl-carousel boostrap

Question

speed problem with owl-carousel boostrap

Navigation

#1 by (3 votes)

1

I'm trying to do an owl-carousel, but I can not establish the duration of how much each image is displayed, look jquery, I'm somewhat exhausted analyzing the code and handling it, (the images delete them, but I leave the code just in case ) the code: html:

          <header class="section-header">
            <h3 id= "clients">Nuestros Clientes</h3>
          </header>

          <div class="owl-carousel clients-carousel">
            <img src="img/clients/client-1.png" alt="">
            <img src="img/clients/client-2.png" alt="">
            <img src="img/clients/client-3.png" alt="">
            <img src="img/clients/client-5.png" alt="">
            <img src="img/clients/client-6.png" alt="">

          </div>

        </div>
      </section><!-- #clients -->

      <!--==========================
        Clients Section
      ============================-->
      <section id="testimonials" class="section-bg wow fadeInUp ">
        <div class="container">

          <header class="section-header">
            <h3>testimonios</h3>
          </header>

          <div class="owl-carousel testimonials-carousel">

            <div class="testimonial-item">

              <h3>cliente1 </h3>

              <p>
                <img src="img/quote-sign-left.png" class="quote-sign-left" alt="">
                texto.
                <img src="img/quote-sign-right.png" class="quote-sign-right" alt="">
              </p>
            </div>

            <div class="testimonial-item">
              <h3>cliente 2</h3>

              <p>
                <img src="img/quote-sign-left.png" class="quote-sign-left" alt="">
                texto
                <img src="img/quote-sign-right.png" class="quote-sign-right" alt="">
              </p>
            </div>

            <div class="testimonial-item">

              <h3>cliente 3</h3>

              <p>
                <img src="img/quote-sign-left.png" class="quote-sign-left" alt="">
                texto
                <img src="img/quote-sign-right.png" class="quote-sign-right" alt="">
              </p>
            </div>


          </div>

        </div>
      </section>

css (which I copied and pasted in several places)

elemento {
transform: translate3d(-3330px, 0px, 0px);
transition: all 0.25s ease 0s;
width: 7770px;
}

I clarify that I use functions, jquery, so as the last of my resources I post here, thank you colleagues

javascript jquery html bootstrap

asked by Tondrax 08.11.2018 в 10:53

source

1 answer

C ++ Can I declare an object of a class as a pair data type? Javascript shows warning undefined

score 3 · Accepted Answer

You must use autoplayTimeout and set a time in ms, by default it comes in 5000, if you want the images to go slower, increase the value to 8000 (for example)

autoplay: true,
autoplayTimeout: 8000,

I add

I recommend that you make use of the plugin in the following way:

<html>
  <head>
    <!-- Owl CSS -->
    <link rel="stylesheet" href="css/owl.carousel.css"> 

    <!-- Owl JS -->     
    <script src="js/owl.carousel.js"></script>
  </head>

  <body>

          <div class="owl-carousel">
            <div class="item">
              <img src="https://picsum.photos/200/300/?random">
            </div>
            <div class="item">
              <img src="https://picsum.photos/200/300/?random">
            </div>
            <div class="item">
              <img src="https://picsum.photos/200/300/?random">
            </div>
            <div class="item">
              <img src="https://picsum.photos/200/300/?random">
            </div>            

          </div>  

  </body>

         <script>
            $(document).ready(function() {
              var owl = $('.owl-carousel');
              owl.owlCarousel({
                margin: 10,
                nav: true,
                loop: true,
                autoplay:true,
                autoplayTimeout:8000,
                responsive: {
                  0: {
                    items: 1
                  },
                  600: {
                    items: 3
                  },
                  1000: {
                    items: 5
                  }
                }
              })
            })
          </script>
</html>