Areá de Clientes em html

Asked

Viewed 258 times

1

I would like to set up an area that shows all our customers on my site, as if it were a mini slide ,as in the image below , what is the simplest way to do? inserir a descrição da imagem aqui

I followed all the steps correctly but even then it doesn’t start or show the images: I’m using a ready-made template that I downloaded 

<!DOCTYPE html>
<html lang="en-US">
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="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 videos with the 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>

html css

  • You can use the Owlcarousel2

  • how he uses himself ?

  • Documentation: https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

  • I need to install git in order to use it ?

  • The easiest option is with some plugin and jQuery, you have several options. Here is a list of 50 options from 2017 https://1stwebdesigner.com/jquery-gallery/

  • Possible duplicate of How to make a slider footer by running the site partners?

Show 1 more comment

1 answer

1

Using the Owncarousel.

To install the Owlcarousel2, you need to add the jQuery on your html page. That way:

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

Now we need to install the Owlcarousel2, for this just add the code below (under the previous code)

<script src="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 all 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><img src="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><img src="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><img src="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 let’s add the code responsible for making carousel effect. Add the code below before the tag </body>

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

Okay, just open your page and test. *If you want to let it stand still, 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>
<script src="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><img src="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><img src="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><img src="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>

  • Very well explained , Valdeir ,Thank you very much, but I was left with a doubt, where I enter the code : "$(Function(){ $(". Owl-Carousel"). owlCarousel({autoplay: true}); })"

  • @luismatheus this excerpt you can add before </body>

  • I made a change in my question I could take a look

  • @luismatheus, replace all this code https://pastebin.com/45ZV72PMwith $(".owl-carousel").owlCarousel({autoplay: true});

Browser other questions tagged html css

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