Question

我有这个代码将显示图像轮播。

对于桌面，我想每行显示3个缩略图; 对于手机，每行只有一个或两个缩略图。

在desktopview中工作正常但在mobileview中如何在水平方向上只显示一个或两个图像并使用指示器查看下一个图像？

我尝试使用此功能但是无效

<div class="col-sm-6 col-md-4">

HTML

<div class="container">
      <div class="row">
        <h2>Media Slider Carousel BS3</h2>
      </div>
      <div class='row'>
        <div class='col-md-8'>
          <div class="carousel slide media-carousel" id="media">
            <div class="carousel-inner">
              <div class="item  active">
                <div class="row">
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>          
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>        
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>          
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>        
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>          
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></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>
    </div>

CSS

 /* carousel */
    .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
    }
    /* End carousel */

JS

  $(document).ready(function() {
      $('#media').carousel({
        pause: true,
        interval: false,
      });
    });

移动视图中的媒体旋转木马

0 个答案: