How to use owl carousel
How to use owl carousel
Owl Carousel has been choose as number one jQuery plugin by hundreds of developers. Now its time for a new version that comes with lots of new features and even more user friendly API & use owl carousel.
- Fully Customization
- Touch and Drag Support
- Fully Responsive
- Modern Browsers
- Zombie Browsers
- Modules and Plugins
CSS -
<link href="http://www.24limousine.com/wp-content/themes/24Limousine/assets/css/owl.carousel.min.css" type="text/css" rel="stylesheet"/>
HTML -
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
</div>
JQUERY -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.24limousine.com/wp-content/themes/24Limousine/assets/js/owl.carousel.min.js"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:4
}
}
})
</script>
Follow On Social Media -
Follow on instagram - https://www.instagram.com/frontendissue/
Follow on Twitter - https://twitter.com/IssueEnd
Follow on Linkedin - https://www.linkedin.com/in/hitesh-patidar-34253a10a/
Follow on GooglePlus - https://plus.google.com/118238268171156252992
Follow on pinterest - https://in.pinterest.com/frontendissue/
Great thanks 🙏
ReplyDeletegood post
ReplyDeleteits very useful
ReplyDelete