In this post we will see how to create slider using jquery, here we will use owl carousel for create slider using bootstrap. owl.carousel provides inbuilt css and js for jquery automatic image slider. here we will see how to create slidshow or how to create image slider using jquery.
Here, you need to add owl.carousel css and owl.carousel js for slider, so let's see how to create slidshow using owl.carousel.
first of all we need to add two css in your head section.
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> // required
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> // optional
Now, add jquery and owl.carousel.min.js
into the footer.
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
In HTML file you need to just add class in <div>,<a>,<img>
tags like below.
<div class="owl-carousel">
<div> your content 1</div>
<div> your content 2</div>
<div> your content 3</div>
</div>
After that you need to initializer owl function using jquery script.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Now, you can run simple slider.so, let's see other example of slider.
Example 1 : Simple with responsive
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<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>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
</script>
</html>
Example 2 : Automatic slider
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
Example 3 : Video Slider
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:4
}
}
})
});
</script>
</html>
You may also like :
In this article, we will see how to get the current date and time in react js. You can get the current date and tim...
Sep-02-2022
In this article, we will see how to convert a laravel query to an SQL query. Many times we required laravel query builde...
Oct-27-2022
Hello developers! In this article, we'll see how to create apexcharts bar chart in laravel 11. ApexCharts is a...
Apr-17-2024
Today I will show you how to send e-mail using queue in laravel 7/8, many times we can see some processes take...
Oct-30-2020