在移动设备上的轮播滑块中仅显示一张图片

Question

我有连续 4 张图像的旋转木马滑块，在台式机和平板电脑屏幕上大小还可以，但在移动设备上我不想调整图像大小我只想在每张幻灯片中显示一个项目。 bootstrap 自动调整图像大小并显示较小的项目！如何检测手机屏幕尺寸并在每张幻灯片中只显示一张图片。

我的代码：

<style>
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* 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
}
</style>

  <div class="carousel slide media-carousel" id="media">
    <div class="carousel-inner">
      <div class="item  active">
        <div class="row">
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>          
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>  
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>  
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>              
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>         
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>  
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div> 
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>              
        </div>
      </div>
    </div>
    <a data-slide="next" href="#media" class="right carousel-control">‹</a>
    <a data-slide="prev" href="#media" class="left carousel-control">›</a>
  </div>

在桌面预览：

在手机中预览：

Answer 1

无法使用 bootstrap 旋转木马根据屏幕分辨率调整幻灯片，您需要使用外部资源来制作此类困难的滑块。

这是参考资料link，可帮助您制作此类滑块。

光滑的滑块： https://kenwheeler.github.io/slick/

在移动设备上的轮播滑块中仅显示一张图片

show only one image in carousel slider on mobile

html

css

carousel

bootstrap-carousel