OWL Carousel Full Width Image Responsive Code

<link href=”owl.carousel.css” rel=”stylesheet”>
<div id=”owl-demo” class=”owl-carousel owl-theme”>

<div class=”item”><img src=”fullimage1.jpg” alt=”The Last of us”></div>
<div class=”item”><img src=”fullimage1.jpg” alt=”GTA V”></div>
<div class=”item”><img src=”fullimage1.jpg” alt=”Mirror Edge”></div>

</div>

<script src=”jquery-1.9.1.min.js”></script>
<script src=”owl.carousel.js”></script>

<script>
$(document).ready(function() {

$(“#owl-demo”).owlCarousel({

navigation : true, // Show next and prev buttons

slideSpeed : 300,
paginationSpeed : 400,

items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: true,
itemsMobile : true,
loop: true

});

});
</script>
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>

Add a Comment

Your email address will not be published. Required fields are marked *