Automatic slider with 5 columns how to do?

Navigation
2

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

	<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>
    
asked by anonymous 06.07.2018 / 21:32

1 answer

0

Isabela by the classes that you used in your question I am seeing that you are using the Owl Carousel, to make it work on the page you need to adjust some details on your page. Official project link link

First you need to index the .css of this framework in <head> of your document. In this case the links are from the CDN, but you 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% of Owl% 

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

Then you need to put after these script your configuration of how you want the Slider working, I left comments in the script to help you. I made in this config to appear 2 imgs in small screens 3 in averages and 5 in big ones. 

<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 you have the full model of the page for you to see Notice that on small screens have only 2 imgs, but execute in "Página toda" that 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><scriptsrc="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>
    
07.07.2018 / 03:40
Getting value from array mvc Datatable slow loading many results