I tried to make a logo slider using Owl carousel. But the carousel isn't appearing.
I want my carousel to look like this:
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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.