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
3

Hello,

Thank you for the help. I have implemented all of the solutions you have added. However, now the row column has a height of 0. I tried to set overflow: auto; but this did not solve the problem. The section I’m having issues with is between lines 147 to 240.

Also, when I remove the owl-carousel owl-theme div, the row shows up and I can see the cards with the images.

<!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">


    <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>
    
	  <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
	    <div class="container">
	      <a class="navbar-brand" href="index.html">Uptown</a>
	      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
	        <span class="oi oi-menu"></span> Menu
	      </button>

	      <div class="collapse navbar-collapse" id="ftco-nav">
	        <ul class="navbar-nav ml-auto">
	          <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
	          <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
	          <li class="nav-item"><a href="agent.html" class="nav-link">Agent</a></li>
	          <li class="nav-item"><a href="services.html" class="nav-link">Services</a></li>
	          <li class="nav-item"><a href="properties.html" class="nav-link">Properties</a></li>
	          <li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
	          <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
	        </ul>
	      </div>
	    </div>
	  </nav>
    
  
    <div class="hero-wrap ftco-degree-bg" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text justify-content-center align-items-center">
          <div class="col-lg-8 col-md-6 ftco-animate d-flex align-items-end">
          	<div class="text text-center">
	            <h1 class="mb-4">The Simplest <br>Way to Find Property</h1>
	            <p style="font-size: 18px;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts</p>
	            <form action="#" class="search-location mt-md-5">
		        		<div class="row justify-content-center">
		        			<div class="col-lg-10 align-items-end">
		        				<div class="form-group">
		          				<div class="form-field">
				                <input type="text" class="form-control" placeholder="Search location">
				                <button><span class="ion-ios-search"></span></button>
				              </div>
			              </div>
		        			</div>
		        		</div>
		        	</form>
            </div>
          </div>
        </div>
      </div>
      <div class="mouse">
				<a href="#" class="mouse-icon">
					<div class="mouse-wheel"><span class="ion-ios-arrow-round-down"></span></div>
				</a>
			</div>
    </div>

    <section class="ftco-section ftco-no-pb">
      <div class="container">
      	<div class="row justify-content-center">
          <div class="col-md-12 heading-section text-center ftco-animate mb-5">
          	<span class="subheading">Our Services</span>
            <h2 class="mb-2">The smartest way to buy a home</h2>
          </div>
        </div>
        <div class="row d-flex">
          <div class="col-md-3 d-flex align-self-stretch ftco-animate">
            <div class="media block-6 services d-block text-center">
            	<div class="icon d-flex justify-content-center align-items-center"><span class="flaticon-piggy-bank"></span></div>
              <div class="media-body py-md-4">
                <h3>No Downpayment</h3>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex align-self-stretch ftco-animate">
            <div class="media block-6 services d-block text-center">
            	<div class="icon d-flex justify-content-center align-items-center"><span class="flaticon-wallet"></span></div>
              <div class="media-body py-md-4">
                <h3>All Cash Offer</h3>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex align-self-stretch ftco-animate">
            <div class="media block-6 services d-block text-center">
            	<div class="icon d-flex justify-content-center align-items-center"><span class="flaticon-file"></span></div>
              <div class="media-body py-md-4">
                <h3>Experts in Your Corner</h3>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex align-self-stretch ftco-animate">
            <div class="media block-6 services d-block text-center">
            	<div class="icon d-flex justify-content-center align-items-center"><span class="flaticon-locked"></span></div>
              <div class="media-body py-md-4">
                <h3>Lokced in Pricing</h3>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
              </div>
            </div>      
          </div>
        </div>
      </div>
    </section>




    
      <section class="ftco-section goto-here">
      <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-12 heading-section text-center ftco-animate mb-5">
              <span class="subheading">What we offer</span>
              <h2 class="mb-2">Exclusive Offer For You</h2>
            </div>
          </div>
          

          
      <div class="row">
        <div class="owl-carousel owl-theme">
          <div class="col-md-4">
            <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-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 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>
</section>

 <!-- loader -->
  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></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 -->
 
  

  
  <!-- 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 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>
    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: 3
        },
        968: {
          items: 4
        },
      }
    })
  </script>
    
  </body>
</html>
4

I might suggest you add image elements inside the links instead of using background images.

Or you can set the a container to display: block and give it some dimensions (whatever size works).

a.img {
  display: block;
  height: 200px;
  width: 200px;
  background-size: cover;
}
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.