Owl Carousel Autoplay Not Working using Bootstrap

HTML-CSS
1

Hello, I would like to implement an owl carousel autoplay into one of my divs however, it is not working as expected. Firstly, the cards are not aligned in 1 row and multiple columns like in this example:

I will be posting my code below and if someone could help me figure out this problem it would be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Uptown - Free Bootstrap 4 Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/ionicons.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">

    
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    
  </head>
  <body>

<div class="container-1">
  <div class="row-1">
    <div class="owl-carousel owl-theme">
      
        <div class="col-md-10">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-2.jpg);"></a>
            <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,     050<small>/mo</small></span></p>
              <ul class="property_list">
              <li><span class="flaticon-bed"></span>3</li>
              <li><span class="flaticon-bathtub"></span>2</li>
              <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
            </ul>
            <h3><a href="#">The Blue Sky Home</a></h3>
            <span class="location">Oakland</span>
            <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
              <span class="ion-ios-link"></span>
            </a>
          </div>
        </div>
        </div>
      </div>
      
    
      <div class="col-md-4">
        <div class="property-wrap ftco-animate">
          <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
            <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
              <li><span class="flaticon-bed"></span>3</li>
              <li><span class="flaticon-bathtub"></span>2</li>
              <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
            </ul>
            <h3><a href="#">The Blue Sky Home</a></h3>
            <span class="location">Oakland</span>
            <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
              <span class="ion-ios-link"></span>
            </a>
          </div>
        </div>
      </div>
    

      
        <div class="col-md-4">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
              <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
              <li><span class="flaticon-bed"></span>3</li>
              <li><span class="flaticon-bathtub"></span>2</li>
              <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
            </ul>
            <h3><a href="#">The Blue Sky Home</a></h3>
            <span class="location">Oakland</span>
            <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
              <span class="ion-ios-link"></span>
            </a>
          </div>
        </div>
      </div>
      </div>

      
        <div class="col-md-4">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
              <div class="text">
                <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
                <ul class="property_list">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
              </ul>
            <h3><a href="#">The Blue Sky Home</a></h3>
            <span class="location">Oakland</span>
            <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
              <span class="ion-ios-link"></span>
            </a>
          </div>
        </div>
      </div>
      </div>

      
        <div class="col-md-4">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
              <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
              <li><span class="flaticon-bed"></span>3</li>
              <li><span class="flaticon-bathtub"></span>2</li>
              <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
            </ul>
            <h3><a href="#">The Blue Sky Home</a></h3>
            <span class="location">Oakland</span>
            <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
              <span class="ion-ios-link"></span>
            </a>
          </div>
        </div>
      </div>
    


        <div class="col-md-4">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
              <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
              <li><span class="flaticon-bed"></span>3</li>
              <li><span class="flaticon-bathtub"></span>2</li>
              <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
            </ul>
            <h3><a href="#">The Blue Sky Home</a></h3>
            <span class="location">Oakland</span>
            <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
              <span class="ion-ios-link"></span>
            </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>


  <script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script src="js/index.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  <script src="js/jquery.timepicker.min.js"></script>
  <script src="js/scrollax.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
  <script src="js/google-map.js"></script>
  <script src="js/main.js"></script>

  <!-- EXTERNAL OWL CAROUSEL CSS CDN LINKS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <!-- JQUERY CDN LINK -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-JobWAqYk5CSjWuVV3mxgS+MmccJqkrBaDhk8SKS1BW+71dJ9gzascwzW85UwGhxiSyR7Pxhu50k+Nl3+o5I49A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- JAVASCRIPT CDN LINKS FOR OWL CAROUSEL LIBRARY -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true,
    responsive:{
      0:{
          items:1
      },
      568:{
        items:2
      },
      768:{
        items3
      },
    }
})
  </script>
    
  </body>
</html>
2

You closed the element with the owl-carousel class before the 4 items it is supposed to have inside it. It only has one element.

Also:

  1. Don’t load multiple versions of jQuery

  2. Load your CSS before the body content.

  3. The responsive object is missing a colon : for one of the properties. And the items don’t match the numbers of items you have inside the carousel.

  4. container and row are bootstrap classes container-1 and row-1 are not.

  5. The col class is part of a 12 column layout. If you add numbers, they should add up to 12 (per row). Use the col class without a number to use automatic columns.

Might not be exactly what you wanted, but at least it works.

Example 
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Uptown - Free Bootstrap 4 Template by Colorlib</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900&display=swap" rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

  <div class="container">
    <div class="row">

      <div class="owl-carousel owl-theme">

        <div class="col">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-2.jpg);"></a>
            <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3, 050<small>/mo</small></span></p>
              <ul class="property_list">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
              </ul>
              <h3><a href="#">The Blue Sky Home</a></h3>
              <span class="location">Oakland</span>
              <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
                <span class="ion-ios-link"></span>
              </a>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
            <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
              </ul>
              <h3><a href="#">The Blue Sky Home</a></h3>
              <span class="location">Oakland</span>
              <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
                <span class="ion-ios-link"></span>
              </a>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
            <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
              </ul>
              <h3><a href="#">The Blue Sky Home</a></h3>
              <span class="location">Oakland</span>
              <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
                <span class="ion-ios-link"></span>
              </a>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="property-wrap ftco-animate">
            <a href="#" class="img" style="background-image: url(images/work-1.jpg);"></a>
            <div class="text">
              <p class="price"><span class="old-price">800,000</span><span class="orig-price">$3,050<small>/mo</small></span></p>
              <ul class="property_list">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-floor-plan"></span>1,878 sqft</li>
              </ul>
              <h3><a href="#">The Blue Sky Home</a></h3>
              <span class="location">Oakland</span>
              <a href="#" class="d-flex align-items-center justify-content-center btn-custom">
                <span class="ion-ios-link"></span>
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    var owl = $('.owl-carousel');
    owl.owlCarousel({
      items: 4,
      loop: true,
      margin: 10,
      autoplay: true,
      autoplayTimeout: 1000,
      autoplayHoverPause: true,
      responsive: {
        0: {
          items: 1
        },
        568: {
          items: 2
        },
        768: {
          items: 4
        },
      }
    })
  </script>

</body>

</html>
1 Like