How to make a logo css slider?


Tags: jquery,html,css,slider,carousel

Problem :

I tried to make a logo slider using Owl carousel. But the carousel isn't appearing.

I want my carousel to look like this: enter image description here

My html is:

    <div class="owl-carousel">
      <div class="item"><img src="resources/img/c-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/h-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/a-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/am_logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/le-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/pan-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/i-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/b-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/s-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/so-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/ep-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/d-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/br-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/ap-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/in-logo.png" alt="Owl Image"></div>
    </div>

My css is:

.owl-carousel .item{
    margin: 3px;
}

.owl-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

and in my html I included the script:

<script>


$(document).ready(function() {

  $(".owl-carousel").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds

      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});


</script>

I included the:

<script src="vendors/js/owl.carousel.js"></script> 
<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css">
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>

How can I make the slider appear? Or is there an easier way to achieve this slider look?



Solution :

You need to include the owl carousel file after you have included JQuery like so:

<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css">
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<script src="vendors/js/owl.carousel.js"></script> 

    CSS Howto..

    how to select the 2nd child Div of a div using CSS

    CSS How to make div 100% despite 80% div

    How can I select this element?

    How to use custom underline with breakline in CSS?

    Don't understand how to control css elements with jQuery css

    CSS how to get a div to the right side and a div exactly in the middle?

    Show a caption with a semi-transparent color overlay when hovering over an image

    How to prevent auto-rotating images on iOS on HTML with CSS/Javascript

    CSS page headers - how to use print margins?

    tooltip pointer is showing downwards to the left of the hyper link

    How to prevent fixed positioned element overlapping others elements in css?

    How do you target div last-child within another div?

    How to equal height of