Owl carousel Images slider

❮ Prev Next: Owl Carousel Slider Templates ❯

Owl carousel is a best image slider, You can capture the attention of viewers by adding visual objects such as photos and videos to your website using Owl carousel, This is a great practice for a designer or photographer's website, Placing images or cards in sliders or photo carousel makes them more interactive, You can use Owl carousel autoplay mode and can set slide timing.

Here are some owl carousel slider templates, check them out

Single Item Slider

Script

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    margin: 20,
    nav: false,
    dots: false,
    items: 1
  })
</script>

Script

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    margin: 20,
    stagePadding: 50,
    nav: false,
    dots: false,
    items: 1
  })
</script>

Multiple Items Slider

Script

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    margin: 20,
    nav: false,
    dots: false,
    items: 3,
  })
</script>

Script

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    margin: 20,
    stagePadding: 50,
    nav: false,
    dots: false,
    items: 2,
  })
</script>

Responsive Multiple Items Slider

Script

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    margin: 20,
    nav: false,
    dots: false,
    responsive: {
      0: {
        items: 1,
        nav: false
      },
      600: {
        items: 2,
        nav: false
      },
      1000: {
        items: 3,
        nav: false,
      },
    }
  })
</script>

Script

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    margin: 20,
    stagePadding: 50,
    nav: false,
    dots: false,
    responsive: {
      0: {
        items: 1,
        nav: false
      },
      600: {
        items: 2,
        nav: false
      },
      1000: {
        items: 3,
        nav: false,
      },
    }
  })
</script>

Required Files for Owl-Carousel

HTML set-up

<div class="owl-carousel owl-theme">
  <div class="item"><h2>your content</h2></div>
  <div class="item"><h2>your content</h2></div>
  <div class="item"><h2>your content</h2></div>
  <div class="item"><h2>your content</h2></div>
  <div class="item"><h2>your content</h2></div>
  <div class="item"><h2>your content</h2></div>
</div>

Your custom CSS

<style>
  .owl-carousel {
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
  }
  .owl-carousel .item{
    background-color:darkgrey;
    color: #f2f2f2;
    border-radius: 5px;
    height: 12rem;
    display: grid;
    place-items:center;
  }
  .owl-carousel h4 {
    font-size: 5em;
  }
</style>

Jquery & Owl-Carousel CSS, JS links

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.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.min.css">
</head>

Include your favorite template script before closing-body-tag or include to your custom js file.

Learn more about owl-carousel

❮ Prev Next: Owl Carousel Slider Templates ❯