Customers are in html

Navigation
1

I would like to set up an area that shows all our clients on my site, as if it were a mini slide, as in the image below, which is the simplest way to do it?

Ifollowedallthestepscorrectlybutitstilldoesnotstartorshowtheimages:I'musingareadytemplatethatIdownloaded

<!DOCTYPE html>
<html lang="en-US">
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
      <link rel="shortcut icon" href="favicon.ico" type="image/x-ico">
      <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
      <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">  
      <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
      <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
      <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
      <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
      <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
      <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
      <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
      <link rel="manifest" href="/manifest.json">
      <meta name="msapplication-TileColor" content="##ffc924">
      <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
      <meta name="theme-color" content="##ffc924">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width" />
      <title>Mussolino Transporte </title>
      <link rel="stylesheet" href="css/components.css">
      <link rel="stylesheet" href="css/responsee.css">
      <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
      <link rel="stylesheet" href="owl-carousel/owl.theme.css">
      <!-- CUSTOM STYLE -->
      <link rel="stylesheet" href="css/template-style.css">
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
      <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui.min.js"></script>    
      <script type="text/javascript" src="js/modernizr.js"></script>
      <script type="text/javascript" src="js/responsee.js"></script>
      <script type="text/javascript" src="js/template-scripts.js"></script> 
   </head>

My divs with images 

         <div id="latest-news">
            <div class="line">
              <h2 class="section-title">Nossos Clientes </h2>
              <div class="owl-carousel" id="lista-de-clientes">
                <div><img src="img/logocliente.png"/></div>
                <div><img src="img/logocliente2.png"/></div>             
              </div>
            </div> 
         </div>

.owl-carousel img {
  height: 101px;
  width: 224px;
}

 </footer>
     

      <script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
      <script type="text/javascript">
         jQuery(document).ready(function($) {
            var theme_slider = $("#owl-demo");
            $("#owl-demo").owlCarousel({
                navigation: false,
                slideSpeed: 300,
                paginationSpeed: 400,
                autoPlay: 6000,
                addClassActive: true,
             // transitionStyle: "fade",
                singleItem: true
            });
            $("#owl-demo2").owlCarousel({
                slideSpeed: 300,
                autoPlay: true,
                navigation: true,
                navigationText: ["&#xf007","&#xf006"],
                pagination: false,
                singleItem: true
            });
                $(function(){
                  $(".owl-carousel").owlCarousel({autoplay: true});
                })
        
            // Custom Navigation Events
            $(".next-arrow").click(function() {
                theme_slider.trigger('owl.next');
            })
            $(".prev-arrow").click(function() {
                theme_slider.trigger('owl.prev');
            })     
        }); 
      </script>
    
asked by anonymous 09.01.2018 / 17:08

1 answer

1

Using OwnCarousel.

To install OwlCarousel2 , you need to add jQuery on your html page. This way: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

NowweneedtoinstallOwlCarousel2,justaddthecodebelow(belowthepreviouscode)

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>

Ready, after everything is installed, just create a div with your images inside. Ex: 

<div class="owl-carousel" id="lista-de-clientes">
  <div><img src="https://www.billboard.com/files/styles/900_wide/public/stylus/1237919-amy-lee-evanescence-interview-los-angeles-2-617-409.jpg"/></div><div><imgsrc="https://i.pinimg.com/736x/f2/65/22/f265223ec144e0a6104204c1dd7d2e14--simone-simons-sirens.jpg" /></div>
  <div><img src="https://i.ytimg.com/vi/-SO2o7AY2QI/maxresdefault.jpg"/></div><div><imgsrc="http://momentosshow.com.br/wp-content/uploads/2017/10/lacrimosa.jpg" /></div>
  <div><img src="https://s2.vagalume.com/evanescence/images/g99988.jpg"/></div><div><imgsrc="https://s2.glbimg.com/gQD310409G7BrSrLKrqBbJLLQkc=/984x551/smart/filters:format(jpg):cover():strip_icc()/s.glbimg.com/jo/g1/f/original/2017/07/20/linkinpark.jpg" /></div>
</div>

Now we are going to add the code responsible for making the car effect effect. Add the code below before the </body> tag 

$(function(){
    $(".owl-carousel").owlCarousel({autoplay: true});
})

Ready, just open your page and test. * If you want to stop it, just remove {autoplay: true} 

$(".owl-carousel").owlCarousel({autoplay: true});
.owl-carousel img {
  height: 200px;
  width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>

<div class="owl-carousel">
  <div><img src="https://www.billboard.com/files/styles/900_wide/public/stylus/1237919-amy-lee-evanescence-interview-los-angeles-2-617-409.jpg"/></div><div><imgsrc="https://i.pinimg.com/736x/f2/65/22/f265223ec144e0a6104204c1dd7d2e14--simone-simons-sirens.jpg" /></div>
  <div><img src="https://i.ytimg.com/vi/-SO2o7AY2QI/maxresdefault.jpg"/></div><div><imgsrc="http://momentosshow.com.br/wp-content/uploads/2017/10/lacrimosa.jpg" /></div>
  <div><img src="https://s2.vagalume.com/evanescence/images/g99988.jpg"/></div><div><imgsrc="https://s2.glbimg.com/gQD310409G7BrSrLKrqBbJLLQkc=/984x551/smart/filters:format(jpg):cover():strip_icc()/s.glbimg.com/jo/g1/f/original/2017/07/20/linkinpark.jpg" /></div>
</div>
    
09.01.2018 / 17:27
How to move a div with the JQUERY mouse? Extract JDBC Connection from EntityManager using JTA