How to make the owl carousel more flexible?-CodePudding

I'm trying to fit four items on a medium screen and two on a mobile device. I've done everything from adjusting widths and heights to giving each item its own column and removing the main col and replacing it individually for each col, so technically I did col-6 col-md-3 col-lg-3. This didn't turn out so well, so I'm looking for some assistance.

$('.restaurantpartners').owlCarousel({
    loop:true,
    margin:10,
    autoplay:false,
    responsive:{
      0:{
        items:2
      },
      600:{
        items:3
      },
      1000:{
        items:5
      }
    }
  })

.owl-carousel{

    cursor: pointer;

  }

  .owl-carousel .owl-nav{
    overflow: hidden;
    height: 0px;
  }

  .owl-theme .owl-dots .owl-dot.active span, 
  .owl-theme .owl-dots .owl-dot:hover span {
      background: #ff7b5f;
  }


  .owl-carousel .item {
      text-align: center;
      padding: 40px;
  }
  .owl-carousel .nav-btn{
      height: 40px;
      position: absolute;
      width: 40px;
      cursor: pointer;
      top: 105px !important;
  }

  .owl-carousel .owl-prev.disabled,
  .owl-carousel .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
  }

  .owl-carousel .prev-slide{
      background: url(../images/left-arrow-btn.png) no-repeat scroll 0 0;
      left: -40px;
  }
  .owl-carousel .next-slide{
      background: url(../images/right-arrow-btn.png) no-repeat scroll 0 0;
      right: -40px;
  }
  .owl-carousel .prev-slide:hover{
    background: url(../images/left-arrow-hover.png) no-repeat scroll 0 0;
  }
  .owl-carousel .next-slide:hover{
    background: url(../images/right-arrow-hover.png) no-repeat scroll 0 0;
  }

  @media only screen 
   and (max-width : 600px) {
    .owl-carousel .prev-slide{
        display: none;
    }
    .owl-carousel .next-slide{
        display: none;
    }

<head>
    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   

 </head>
 
 <body>
 
 <section id="team" >
        <div >
          <div >
            <h1 >Meet the Team</h1>
          </div>
          <div >
            <div >
                <div >
                    <div >
                          <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                          <div >
                                <div >
                                    <h4>text</h4>
                                    <h5>text</h5>
                                </div>
                          </div>
                    </div>

                    <div >
                      <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                      <div >
                            <div >
                                <h4>text</h4>
                                <h5>text</h5>
                            </div>
                      </div>
                </div>
                <div >
                  <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                  <div >
                        <div >
                            <h4>text</h4>
                            <h5>text</h5>
                        </div>
                  </div>
            </div>
            <div >
              <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
              <div >
                    <div >
                        <h4>text</h4>
                        <h5>text</h5>
                    </div>
              </div>
              </div>
           <div >
          <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
          <div >
                <div >
                    <h4>text</h4>
                    <h5>text</h5>
                </div>
            </div>
         </div>
         <div >
       <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
       <div >
            <div >
                <h4>text</h4>
                <h5>text</h5>
              </div>
           </div>
              </div>
                </div>
            </div>
        </div>
        </div>
      </section>
      
      
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
 </body>

CodePudding user response：

As I know for using owl carousel according to its documentation we need to add owl.carousel.css, owl.theme.default.css, jquery.js and owl.carousel.js files to our html. So I added the CDN links of them to my answer:

// carousel.js file
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    /* here you can set the settings for responsive items */
    responsive:{
        0:{
            items:2
        },
        768:{
            items:4
        }
    }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>owl-carousel</title>
    <!-- adding bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- adding owl.carousel.css CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx eBvbKyoe1YAfjeRPC gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- adding owl.theme.default.css CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9 LRxoFU6EqLhW4 PKRfU /HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>


<section id="team" >
    <div >
        <div >
            <h1 >Meet the Team</h1>
        </div>

        <div >
            <div >

                <div >
                    <!-- carousel items -->
                    <div >
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                    </div>

                    <div >
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                    </div>

                    <div >
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                    </div>

                    <div >
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                    </div>

                    <div >
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                    </div>

                    <div >
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg"  alt="image1">
                    </div>

                </div>
            </div>
        </div> <!-- end of .row class -->
    </div>
</section>


<!-- adding jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<!-- adding bootstrap.bundle.min.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<!-- adding owl.carousel.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- adding our javascript code -->
<script src="carousel.js"></script>

</body>
</html>

As you could see I ignored your style-sheet and some of your html content. Because they are not necessary or related to the answer of this question. Also you can see that the responsive behavior of carousel comes from responsive option that owl carousel defines for its library. you can read more about options of this library from its documentation.