如何让owl轮播更灵活？

Question

我正在尝试在中等屏幕上显示四个项目，在移动设备上显示两个项目。我已经完成了从调整宽度和高度到为每个项目提供自己的列以及删除主列并为每个列单独替换它的所有操作，所以从技术上讲我做了 col-6 col-md-3 col-lg-3。结果不太好，所以我正在寻求帮助。

$('.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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   

 </head>
 
 <body>
 
 <section id="team" class="text-center bg-dark py-1">
        <div class="container">
          <div class="header my-5">
            <h1 class="text-light">Meet the Team</h1>
          </div>
          <div class="row">
            <div class="col-12 m-auto">
                <div class="owl-carousel owl-theme">
                    <div class="item ">
                          <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" alt="image1">
                          <div class="card-body">
                                <div class="card-title text-center text-light">
                                    <h4>text</h4>
                                    <h5>text</h5>
                                </div>
                          </div>
                    </div>

                    <div class="item ">
                      <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" alt="image1">
                      <div class="card-body">
                            <div class="card-title text-center text-light">
                                <h4>text</h4>
                                <h5>text</h5>
                            </div>
                      </div>
                </div>
                <div class="item ">
                  <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" alt="image1">
                  <div class="card-body">
                        <div class="card-title text-center text-light">
                            <h4>text</h4>
                            <h5>text</h5>
                        </div>
                  </div>
            </div>
            <div class="item ">
              <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" alt="image1">
              <div class="card-body">
                    <div class="card-title text-center text-light">
                        <h4>text</h4>
                        <h5>text</h5>
                    </div>
              </div>
              </div>
           <div class="item ">
          <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" alt="image1">
          <div class="card-body">
                <div class="card-title text-center text-light">
                    <h4>text</h4>
                    <h5>text</h5>
                </div>
            </div>
         </div>
         <div class="item ">
       <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" alt="image1">
       <div class="card-body">
            <div class="card-title text-center text-light">
                <h4>text</h4>
                <h5>text</h5>
              </div>
           </div>
              </div>
                </div>
            </div>
        </div>
        </div>
      </section>
      
      
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

Answer 1

据我所知，根据 documentation 使用 owl carousel 我们需要添加 owl.carousel.css、owl.theme.default.css、jquery.js 和 owl.carousel.js文件到我们的 html。所以我将他们的 CDN 链接添加到我的答案中：

// 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/bootstrap@5.1.3/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" class="text-center py-1">
    <div class="container">
        <div class="header my-5">
            <h1 class="text-dark">Meet the Team</h1>
        </div>

        <div class="row">
            <div class="col-12">

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

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

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

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

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

                    <div class="item ">
                        <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid   rounded-circle" 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/bootstrap@5.1.3/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>

如您所见，我忽略了您的 style-sheet 和一些 html 内容。因为它们与这个问题的答案没有必要或相关。也可以看到轮播的响应行为来自responsive option that owl carousel defines for its library. you can read more about options of this library from its documentation.

如何让owl轮播更灵活？

How to make the owl carousel more flexible?

html

css

owl-carousel

bootstrap-5