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 Downgrade PHP 8 to 7.4 in Ubuntu
How To Downgrade PHP 8 to 7.4...

As a web developer, I understand the significance of embracing the latest technologies to stay ahead in the dynamic worl...

Read More

Aug-04-2023

How to Use Laravel Factory in Seeder
How to Use Laravel Factory in...

Laravel is a popular PHP framework known for its elegance and simplicity in building web applications. When it comes to...

Read More

Sep-13-2023

How To Add Watermark On Image In Laravel 10
How To Add Watermark On Image...

In this article, we will how to add a watermark to an image in laravel 10. Here we will learn about laravel 10 adding a...

Read More

Mar-31-2023

Laravel 9 Where Condition Example
Laravel 9 Where Condition Exam...

In this article, we will see laravel 9 where condition example. Where condition is essential in each and every quer...

Read More

Oct-12-2022