How to Create Slider using jQuery

Websolutionstuff | Aug-04-2021 | Categories : jQuery CSS Bootstrap

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.

 

Add CSS

 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

 

Add JS

 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>

 

Add in HTML File

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 : 

Recommended Post
Featured Post
How To Bind Data In React JS
How To Bind Data In React JS

In this article, we will see how to bind data in React JS. Also, we will see how to bind the variable value in the...

Read More

Aug-19-2022

Carbon Add Years To Date In Laravel
Carbon Add Years To Date In La...

In this article, we will see examples of carbon adding years to date in laravel. Here we will laravel add...

Read More

Dec-07-2020

How To Get Hourly Data In MySQL
How To Get Hourly Data In MySQ...

In this tutorial, we will see how to get hourly data in mysql. Many times we need to get hourly data or we are required...

Read More

Feb-04-2022

Laravel 9 Image Upload In Summernote Editor
Laravel 9 Image Upload In Summ...

In this article, we will see laravel 9 image upload in summernote editor. there are many editor available in l...

Read More

Mar-24-2022