Arrange Bootstrap Carousel item as per width .

Question

we arrange some div's inside bootstrap carousel item. Please see this

.item{
          padding:10%;
      }
      .inner{
          float:left;
          margin:10px;
          border:1px solid black;
          width:26%
      }
      .carousel-control{
          width:4%;
      }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <br>
  <div id="myCarousel" class="carousel" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
          <div class="inner"> 1</div>
          <div class="inner"> 2</div>
          <div class="inner"> 3</div>
      </div>

      <div class="item">
          <div class="inner">4</div>
          <div class="inner">5</div>
          <div class="inner">6</div>
      </div>
    
      <div class="item">
      
          <div class="inner">7</div>
          <div class="inner">8</div>
          <div class="inner">9</div>
      </div>

      <div class="item">
          <div class="inner">10</div>
          <div class="inner">11</div>
          <div class="inner">12</div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

when the window resize to 360px width then div 3 is come in first carousel. But every time we need to show only one row of item in one caurosel . ie, when window is resized to 360px div 3 is show in first carousel itme, but we need to show in second carousel item . Is there any way to do this ?

ie : every time we need to show first row of div's in one carousel item , the other inner div need automatically move to the next level as per the width .

Are you using css media queries to change the width values of your items? — This Guy

Vaibhav S Vaibhav S · Accepted Answer · 2016-12-12T06:11:23

bootstrap 3 does not supports this functionality. So use owl carousel this has cool feautures.

refer this link : http://owlgraphic.com/owlcarousel/demos/images.html

Arrange Bootstrap Carousel item as per width .

1 Answers