How to make images slide using owl carousel

Manideepgoud
Posted by Manideepgoud under jQuery category on | Points: 40 | Views : 4731
Hi,
In this below code snippet, we will see how to use owl carousel.

First, go to https://owlcarousel2.github.io/OwlCarousel2 and click download.
After Downloading the file, extract it.
open the extracted folder, -> docs ->demos ->basic.html
rightclick the basic.html and edit it notepad++, copy the below three files into your local path or local project folder

<link rel="stylesheet" type="text/css" href="../css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="../css/owl.theme.default.min.css">

<script type="text/javascript" src="../js/owl.carousel.js"></script>

select images which you want make slide as below
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="imagsection">
<img src="D:/Manideep/practice/Images/a.png" class="carouselimage"/>
</div>

</div>
<div class="item">
<div class="imagsection">
<img src="D:/Manideep/practice/Images/sql.jpg" class="carouselimage"/>
</div>
</div>
<div class="item">
<div class="imagsection">
<img src="D:/Manideep/practice/Images/ps.jpg" class="carouselimage"/>
</div>
</div>
<div class="item">
<div class="imagsection">
<img src="D:/Manideep/practice/Images/e.jpg" class="carouselimage"/>
</div>
</div>
<div class="item">
<div class="imagsection">
<img src="D:/Manideep/practice/Images/ps.jpg" class="carouselimage"/>
</div>
</div>
<div class="item">
<div class="imagsection">
<img src="D:/Manideep/practice/Images/e.jpg" class="carouselimage"/>
</div>
</div>
</div>
</div>

and add script file which is in below.
<script>
$(document).ready(function(){{
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
});
</script>

Here the owl carousel works!!!

Comments or Responses

Login to post response