Owl Carousel Demo's

Last updated on 04 Apr 2023

Preview Link
Quick Info
Views : 3110
Skills : HTML, CSS, JavaScript, Jquery
Category : slider
Tag : Owl Carousel, Carousel, Slider

What is Owl Carousel

Owl carousel is a plugin uses as a component throgh which users can show slider in borwser. In Slider users can show their own images and content.

Advantage of Owl Carousel

Owl carousel is a fully responsive. Owl carousel is cutomizable In owl carousel users can insert number of images as per their own choice and change its sytling.

How to Add Owl Carousel In Web Page

To add Owl Carousel in your web page, please add below css and jquery link in between <head> </head> section of your web page.

Copy and paste below code in head section of your web page

main.html


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Now, We have to add below code where you want to show slider in your web page. Please paste below code in between <body> </body> section of your web page.

Copy And Below Code To Show Owl Carousel in your web page

demo-1.html


<div class="demo-1 owl-carousel owl-theme">
  <div class="item"> 
  	<img src="https://www.dezven.com/images/project/owl-slider-1.webp" /> 
  </div>
  <div class="item"> 
  	<img src="https://www.dezven.com/images/project/owl-slider-2.webp" /> 
  </div>
  <div class="item"> 
  	<img src="https://www.dezven.com/images/project/owl-slider-3.webp" /> 
  </div>
  <div class="item"> 
  	<img src="https://www.dezven.com/images/project/owl-slider-4.webp" /> 
  </div>
</div>

<script>
$(document).ready(function() {
  $('.demo-1').owlCarousel({
	items:1,
	loop:true,
	dots: true,
	nav:true,
	loop:true,
	autoplay:true,
	autoplayTimeout:2000,
	autoplayHoverPause:true
  });
})
</script>

Demo 1 - Single item Full Screen

Demo 1 : Show Single slide at one time, with dot and arrow.

Copy And Below Code To Show Owl Carousel in your web page

demo-1.html

<!doctype html>
<html lang="en">
<head>
    <title>Owl Carousel Demo 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>

<h1>Demo 1</h1>
<div class="demo-1 owl-carousel owl-theme">
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-1.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-2.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-3.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-4.webp" /> </div>
</div>

<script>
$(document).ready(function() {
  $('.demo-1').owlCarousel({
	items:1,
	loop:true,
	dots: true,
	nav:true,
	loop:true,
	autoplay:true,
	autoplayTimeout:2000,
	autoplayHoverPause:true
  });
})
</script>

</body>
</html>
Preview
Owl Carousel Demos

Demo 2 - Three item Per Slide

Demo 2 Shows 3 slide at one time, with dot and arrow.

Copy And Below Code To Show Owl Carousel in your web page

demo-2.html

<!doctype html>
<html lang="en">
<head>
    <title>Owl Carousel Demo 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>

<h1>Demo 2</h1>
<div class="demo-2 owl-carousel owl-theme">
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-1.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-2.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-3.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-4.webp" /> </div>
</div>

<script>
$(document).ready(function() {
  $('.demo-2').owlCarousel({
	loop:true,
	dots: true,
	nav:true,
	loop:true,
	margin:10,
	autoplay:true,
	autoplayTimeout:2000,
	autoplayHoverPause:true,
	responsive:{
		0:{
			items:1
		},
		600:{
			items:2
		},
		1000:{
			items:3
			}
		}
	});
})
</script>

</body>
</html>
Preview
Owl Carousel Demos

Demo 3 - Four item Per Slide

Demo 3 Shows 4 slide at one time, without dot and arrow.

Copy And Below Code To Show Owl Carousel in your web page

demo-3.html

<!doctype html>
<html lang="en">
<head>
    <title>Owl Carousel Demo 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>

<h1>Demo 3</h1>
<div class="demo-3 owl-carousel owl-theme">
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-1.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-2.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-3.webp" /> </div>
  <div class="item"> <img src="https://www.dezven.com/images/project/owl-slider-4.webp" /> </div>
</div>

<script>
$(document).ready(function() {
  $('.demo-3').owlCarousel({
	loop:true,
	dots: false,
	nav:false,
	loop:true,
	margin:10,
	autoplay:true,
	autoplayTimeout:2000,
	autoplayHoverPause:true,
	responsive:{
		0:{
			items:1
		},
		600:{
			items:2
		},
		1000:{
			items:4
			}
		}
	});
})
</script>
</body>
</html>
Preview
Owl Carousel Demos

Demo 4 - Two item Per Slide With Image And Text

Demo 4 Shows 2 item per slide at one time, With Image And Text.

Copy And Below Code To Show Owl Carousel in your web page

demo-4.html


<html>
<head>
<title>Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://demo.dezven.com/project/web-design/slider/owl-carousel/css/demo-4.css">
</head>
<body>
<div class="container pb-100">
  <div class="width-100">
    <div class="demo-1 owl-carousel owl-theme">
      <div class="item">
        <div class="testimonial">
          <div class="row">
            <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
            <div class="testimonial-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
            <div class="testimonial-user">
              <h5>Nancy Bayers</h5>
              <h6> Founder & CEO  At Dezven</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <div class="row">
            <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
            <div class="testimonial-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
            <div class="testimonial-user">
              <h5>Nancy Bayers</h5>
              <h6> Founder & CEO  At Dezven</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <div class="row">
            <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
            <div class="testimonial-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
            <div class="testimonial-user">
              <h5>Nancy Bayers</h5>
              <h6> Founder & CEO  At Dezven</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <div class="row">
            <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
            <div class="testimonial-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
            <div class="testimonial-user">
              <h5>Nancy Bayers</h5>
              <h6> Founder & CEO  At Dezven</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <div class="row">
            <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
            <div class="testimonial-content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
            <div class="testimonial-user">
              <h5>Nancy Bayers</h5>
              <h6> Founder & CEO  At Dezven</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<script>
$(document).ready(function() {
  $('.demo-1').owlCarousel({
	loop:true,
	dots: true,
	nav:false,
	margin:40,
	responsive:{
		0:{
			items:1
		},
		600:{
			items:2
		},
		1000:{
			items:2
		 	}
		}
	});
})
</script>
</body>
</html>
Preview
Testimonial Owl Carousel Demo Image

Demo 5 - Four item Per Slide, With Image And Text

Demo 5 Shows 4 slide at one time, , With Image And Text.

Copy And Below Code To Show Owl Carousel in your web page

demo-5.html


<html>
<head>
<title>Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://demo.dezven.com/project/web-design/slider/owl-carousel/css/demo-5.css">
</head>
<body>
<div class="container pb-100">
  <div class="width-100">
    <div class="demo-5 owl-carousel owl-theme">
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="testimonial">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          <div class="testimonial-img"> <img src="image/testimonial-1.jpg"> </div>
          <div class="testimonial-user">
            <h5>Nancy Bayers</h5>
            <h6> Founder & CEO  At Dezven</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
$('.demo-5').owlCarousel({
	loop:true,
	dots: true,
	nav:true,
	margin:20,
	responsive:{
		0:{
			items:1
		},
		600:{
			items:2
		},
		1000:{
			items:4
		 	}
		}
	});
   
   
})
</script>
</body>
</html>
Preview
Testimonial Owl Carousel Demo Image 2

Demo 6 - Four item Per Slide

Demo 6 Shows 4 slide at one time, without dot and arrow.

Copy And Below Code To Show Owl Carousel in your web page

demo-6.html


<!doctype html>
<html lang="en">
<head>
<title>Owl Carousel Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://demo.dezven.com/project/web-design/slider/owl-carousel/css/demo-6.css">
</head>
<body>
<div class="demo-1 owl-carousel owl-theme">
  <div class="item bg-yellow"> 1 </div>
  <div class="item bg-blue"> 2 </div>
  <div class="item bg-red"> 3 </div>
  <div class="item bg-green"> 4 </div>
  <div class="item bg-yellow"> 5</div>
  <div class="item bg-blue"> 6 </div>
  <div class="item bg-red"> 7 </div>
  <div class="item bg-green"> 8 </div>
</div>
<script>
$(document).ready(function() {
  $('.demo-1').owlCarousel({
		loop:true,
		dots: true,
		nav:true,
		loop:true,
		autoplay:true,
		margin:20,
		autoplayTimeout:2000,
		autoplayHoverPause:true,
		responsive:{
		0:{
			items:1
		},
		600:{
			items:2
		},
		1000:{
			items:4
		 	}
		}
	});
})
</script>
</body>
</html>
Preview
Owl Carousel Demos

Demo 7 - Eight item Per Slide

Demo 7 Shows 8 images per slide at one time, with dot and arrow.

Copy And Below Code To Show Owl Carousel in your web page

demo-7.html


<!doctype html>
<html lang="en">
<head>
<title>Owl Carousel Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://demo.dezven.com/project/web-design/slider/owl-carousel/css/demo-7.css">
</head>
<body>
<div class="demo-7 owl-carousel owl-theme">
    <div class="item bg-red"> 1 </div>
    <div class="item bg-red"> 2 </div>
    <div class="item bg-red"> 3 </div>
    <div class="item bg-red"> 4 </div>
    <div class="item bg-red"> 5</div>
    <div class="item bg-red"> 6 </div>
    <div class="item bg-red"> 7 </div>
    <div class="item bg-red"> 8 </div>
    <div class="item bg-red"> 1 </div>
    <div class="item bg-red"> 2 </div>
    <div class="item bg-red"> 3 </div>
    <div class="item bg-red"> 4 </div>
    <div class="item bg-red"> 5</div>
    <div class="item bg-red"> 6 </div>
    <div class="item bg-red"> 7 </div>
    <div class="item bg-red"> 8 </div>
    <div class="item bg-red"> 1 </div>
    <div class="item bg-red"> 2 </div>
    <div class="item bg-red"> 3 </div>
    <div class="item bg-red"> 4 </div>
    <div class="item bg-red"> 5</div>
    <div class="item bg-red"> 6 </div>
    <div class="item bg-red"> 7 </div>
    <div class="item bg-red"> 8 </div>
</div>
<script>
$(document).ready(function() {
  $('.demo-7').owlCarousel({
		loop:true,
		dots: true,
		nav:true,
		loop:true,
		autoplay:true,
		margin:20,
		autoplayTimeout:2000,
		autoplayHoverPause:true,
		responsive:{
		0:{
			items:1
		},
		600:{
			items:4
		},
		1000:{
			items:8
		 	}
		}
	});
})
</script>
</body>
</html>
Preview
Owl Carousel Demos

Post your comment

For any query, information or suggestion, post your comment below. We love to hear from your.