Owl Carousel Demo's

    Last updated on 04 Apr 2023

    Preview Link
    Quick Info
    Views : 4537
    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.

    • gurhan destan

      Thank You