在多图像项目轮播中在移动屏幕中显示一个图像

时间：2017-08-28 18:57:15

标签： jquery html css twitter-bootstrap

我有一个bootstrap carousel每个项目有4个图像，它的工作完美但我的问题是在响应式屏幕中显示它，我想分别显示每个图像，而不是每个项目有4个图像，如大屏幕我想要只有一个图像，我有三个项目，有12个图像，我希望能够在移动屏幕上自己滑动每个，我该怎么办？这是我的代码：

＆＃13;
＆＃13; 
.carousel.slide img {
    width:100%;
    height:auto;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
       <!-- Slide -->
    <div class="item active">
        <div class="row">
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>
       <!-- Slide -->
    <div class="item">
        <div class="row">
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>
       <!-- Slide -->
    <div class="item">
        <div class="row">
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-xs-3">
                <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>

</div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你可以这样做。询问屏幕宽度，如果宽度较小，则显示移动版本的某个值，就像示例中一样。 我用过你的代码。展示它。我没有改变任何东西。

var controleScreenHeight = function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    console.log(width);
    if (width < 1080){
      $('#Mobile').show();
    }
    else{
      $('#Desktop').show();
    }
};



var init = function () {
$('#Desktop, #Mobile').hide();
controleScreenHeight();
};
$(document).ready(init());
.carousel.slide img {
    width:100%;
    height:auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div id="Desktop">
  <div id="carousel-example-generic" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
         <!-- Slide -->
      <div class="carousel-item active">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
         <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
         <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>

  </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="icon-next"></span>
    </a>
</div>
</div>

<div id="Mobile">
  <div id="carousel-example-generic" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        <li data-target="#carousel-example-generic" data-slide-to="6"></li>
        <li data-target="#carousel-example-generic" data-slide-to="7"></li>
        <li data-target="#carousel-example-generic" data-slide-to="8"></li>
        <li data-target="#carousel-example-generic" data-slide-to="9"></li>
        <li data-target="#carousel-example-generic" data-slide-to="10"></li>
        <li data-target="#carousel-example-generic" data-slide-to="11"></li>
        <li data-target="#carousel-example-generic" data-slide-to="12"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
         <!-- Slide -->
      <div class="carousel-item active">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
      <!-- Slide -->
      <div class="carousel-item">
          <div class="row">
              <div class="col-xs-3">
                  <img src="http://placehold.it/260x180" alt=""/>
                  <div class="carousel-caption">This is a caption</div>
              </div>
          </div>
      </div>
  </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>
</div>

相关问题
最新问题