Automatic slider with 5 columns how to do?

Asked

Viewed 333 times

2

I’m trying to make an automatic slider in this style, but it’s not working.

Modelo de Slider

	<section class="mbr-section" id="equipe"
         style="background-color: rgb(204, 204, 204); padding-top: 120px; padding-bottom: 120px;">
  
  <div class="list_carousel">

            <ul class="logos-slides owl-carousel owl-theme owl-responsive-992 owl-loaded" data-speed="500" data-items="6">
                        
                                   
            	<div class="owl-stage-outer">
                	<div class="owl-stage" style="transform: translate3d(60px, 0px, 0px); transition: 0.25s; width: 3052.8px;">
                       
                       <div class="owl-item cloned" style="width: 150px; margin-right: 0px;">
                       		<li style="height: 150px;"><a href="#" class="bwWrapper"><img src="assets/images/PM CONSULTORES/ Executivo.png" style="max-height:150px; width:auto" class="logo" width="2334" height="1630" alt="Nome"></a>                    
                       		</li>
                       </div>
                        
                       <div class="owl-item cloned" style="width: 150px; margin-right: 0px;">
                       		<li style="height: 150px;"><a href="#" class="bwWrapper"><img src="assets/images/PM CONSULTORES/Executivo.png" style="max-height:150px; width:auto" class="logo" width="2334" height="1630" alt="Nome"></a>                    
                       		</li>
                       </div>
                        
                       <div class="owl-item cloned" style="width: 150px; margin-right: 0px;">
                       		<li style="height: 150px;"><a href="#" class="bwWrapper"><img src="assets/images/PM CONSULTORES/ Executivo.png" style="max-height:150px; width:auto" class="logo" width="2334" height="1630" alt="Nome"></a>                    
                       		</li>
                       </div> 
                        
                       <div class="owl-item cloned" style="width: 150px; margin-right: 0px;">
                       		<li style="height: 150px;"><a href="#" class="bwWrapper"><img src="assets/images/PM CONSULTORES/Executivo.png" style="max-height:150px; width:auto" class="logo" width="2334" height="1630" alt="Nome"></a>                    
                       		</li>
                       </div>
                        
					</div>
                </div>
                        <div class="owl-controls"><div class="owl-nav"><div class="owl-prev" style="display: none;">prev</div><div class="owl-next" style="display: none;">next</div></div><div class="owl-dots" style=""><div class="owl-dot"><span></span></div><div class="owl-dot active"><span></span></div></div></div></ul>
        </div>
 </section>

javascript mobile responsive-layout slider owl-carousel

1 answer

0


Isabela by the classes you used in your question I see that you are using Owl Carousel, to make it work on the page you need to adjust some details on your page. Official project link with documentation https://owlcarousel2.github.io/OwlCarousel2/

First you need to index the .css of this framework in <head> of your document. In this case the links are from CDN, but vc can use locally using the path of the files in your directory.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">

Then at the end of your document you need to add the <scripts> owl

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

After you need to put after these script your configuration of how you want Slider to work, I left comments in the script to help you. I did in this config to appear 2 imgs on small screens 3 in medium and 5 in large.

<script>
  $(document).ready(function(){
    $(".owl-carousel").owlCarousel();
  });
  var owl = $('.owl-carousel');
    owl.owlCarousel({
      loop:true, //deixa ele rodando eternament
      margin:10, // distancia entre imgs
      autoplay:true, // fica rodando sozinho
      autoplayTimeout:1500, // tempo em que gira e para trocando imgs
      autoplayHoverPause:true, // no hover ele para de rodar
      responsive:{ 
      0:{
          items:2 // 2 img em telas até 767px
      },
      768:{
          items:3 // 3 img em telas maiores que 768px
      },
      992:{
          items:5 // 5 img em telas maiores que 992px
      }
    }
  });
</script>

Here is the full page template for you to see Note that in small screens has only 2 imgs, but run in "Whole page" you will see 5 imgs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
    <style>
    </style>
</head>

<body>

    <div class="owl-carousel owl-theme">
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="http://unsplash.it/200/100" alt="">
            </a>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
        $('.owl-carousel').owlCarousel({
            nav: true,
            loop: true, //deixa ele rodando eternament
            margin: 10, // distancia entre imgs
            autoplay: true, // fica rodando sozinho
            autoplayTimeout: 1500, // tempo em que gira e para trocando imgsr
            responsive: {
                0: {
                    items: 2 // 2 img em telas até 767px
                },
                768: {
                    items: 3 // 3 img em telas maiores que 768px
                },
                992: {
                    items: 5 // 5 img em telas maiores que 992px
                }
            }
        })
    </script>

</body>

</html>

  • Thanks Hugo, it worked.

  • @Isabela Be sure to read the official documentation of the Owl there are things that may interest you. Good luck there.

Browser other questions tagged javascript mobile responsive-layout slider owl-carousel

You are not signed in. Login or sign up in order to post.