响应式引导轮播（不工作）

Posted 2023-05-08

【中文标题】响应式引导轮播（不工作）

【英文标题】：Responsive bootstrap carousel (not working)

【发布时间】：2021-10-10 03:32:58

【问题描述】：

我正在尝试添加一个响应式引导轮播。它在全视图中看起来不错，但是当我尝试减小屏幕尺寸时，轮播项目会自行调整它们低于前一个。我希望它们在轮播中显示为单个项目。附上屏幕和代码。请检查并让我知道我错过了什么。希望有任何帮助

Full Screen Small Screen

/* carousel */
.media-carousel 

  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;

/* Previous button  */
.media-carousel .carousel-control

     background: #37873a!important;
color:white;

.media-carousel .carousel-control:hover 

color:white;

/* Previous button  */
.media-carousel .carousel-control.left 

  left: -12px;
  background-image: none;
  background: #37873a;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px;
  padding-top: 2px;

/* Next button  */
.media-carousel .carousel-control.right 

  right: -12px !important;
  background-image: none;
  background: #37873a;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px;
  padding-top: 2px;

/* Changes the position of the indicators */
.media-carousel .carousel-indicators 

  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;

/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 

  background: #c0c0c0;

.media-carousel .carousel-indicators .active 

  background: #333333;

.media-carousel img

  width: 250px;
  height: 100px

<section class="divider bg-light promotion-section">
    <div class="container pt-10 pb-10">
        <div class="row">
           <div class='col-md-9 col-lg-9 col-sm-12'>
             <h3 class="text-center">Meet Our Team</h3>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>          
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>        
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div> 
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-3 col-lg-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>          
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>        
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div> 
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>          
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>     
              <div class="col-md-3 col-sm-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>  
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
    <div class='col-md-3'>
             <h3 class="text-center">Video Gallery</h3>
      <div class="carousel slide media-carousel" id="media2">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>  
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>   
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-12">
                <a class="thumbnail" href="#"><img  src="~/images/user.jpg"></a>
              </div>   
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media2" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media2" class="right carousel-control">›</a>
      </div>                          
    </div>
        </div>
    </div>
</section>

【参考方案1】：

尝试使用 Owl 轮播，完全可自定义。