Easy Slider Example with OwlCarousel Like :: Testimonial,Slider, ect. ::
Download the Js and Css Also from the OwlCarousel Website - with require jquery js file.
<link rel="stylesheet" href="../owlcarousel/owl.carousel.css">
<link rel="stylesheet" href="../owlcarousel/owl.theme.default.css">
<script src="../owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<script>
jQuery('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false,
//navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:2
}
}
})
</script>
-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com
Download the Js and Css Also from the OwlCarousel Website - with require jquery js file.
<link rel="stylesheet" href="../owlcarousel/owl.carousel.css">
<link rel="stylesheet" href="../owlcarousel/owl.theme.default.css">
<script src="../owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<script>
jQuery('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false,
//navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:2
}
}
})
</script>
-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com
No comments:
Post a Comment