Displaying one image in mobile screen in multi images item carousel

Question

I have a bootstrap carousel with 4 images per item, its working perfectly but my problem is displaying it in responsive screens, i want to display each image separately, instead of having 4 images per item like in large screen i want to have one image only, i have three items here with 12 images, i want to be able to slide each one on its own in mobile screen, how can i do that? here is my code:

.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="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>

If I understand you correct you want to see 4 images per slide when you are on a pc and only one if you are on a mobile device? — Steven, Aug 28 '17 at 19:13
Try changing: `
` to `
` then wrapping a: `
` around each of them instead of a group of 4. — zer00ne, Aug 28 '17 at 19:18
@jessica, sorry I meant give each slide the `.item` class and place them into one `.row`. — zer00ne, Aug 28 '17 at 20:48

score 0 · Answer 1 · answered Aug 28 '17 at 19:35

You can do something like this. Ask the screenwidth and if the width is smaller then some value you show the mobile version just like in the example. I used your code. To show it. I didn't changed anything to it.

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>

Displaying one image in mobile screen in multi images item carousel

1 Answers1