Bootstrap Carousel w/ Centered div and multiple divs showing

jquery html css twitter-bootstrap carousel

19,583

<!-- Carousel items -->
            <div class="carousel-inner">
              <div class="item active">
                <div class="row">
                  <div class="col-sm-3"><a class="thumbnail"> 1 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 2 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 3 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 4 </a>
                  </div>
                </div>
                <!--/row-->
              </div>
              <!--/item-->
              <div class="item">
                <div class="row">
                  <div class="col-sm-3"><a class="thumbnail"> 5 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 6 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 7 </a>
                  </div>
                  <div class="col-sm-3"><a class="thumbnail"> 8 </a>
                  </div>
                </div>
                <!--/row-->
              </div>
              <!--/item-->
            </div>
            <!--/carousel-inner-->
            <a class="left carousel-control" href="#slideCarousel" data-slide="prev">‹</a>

            <a class="right carousel-control" href="#slideCarousel" data-slide="next">›</a>

Had a look. For the short time I spent this quick fiddle should be enough to get you started. I have aligned the carousel elements in bootstrap rows and the arrow buttons will change the row you see. After styling the thumbnails I have started to look like the one in your example, you should make a start on trying to make just one element stand out as active as opposed to a whole row by adding CSS to the active class. I hope this gets you on the right track :)

19,583

Author by

OMGDrAcula

Updated on June 09, 2022

Comments

OMGDrAcula almost 2 years

So in short I need something exactly like "Centered Mode" in this plugin

http://kenwheeler.github.io/slick/

I need to do this but using bootstrap. As lead would like to avoid using plugins where possible. Unless it would be simpler to just use a plugin.

The lead dev on the project I am on wants to avoid adding plugins where possible. We are using bootstrap 3 and he figured the carousel that comes with bootstrap could just be edited to do what we need. Would it be more time efficient to try and edit the carousel, or build something from scratch(which at point wouldn't it just make sense to use a plugin?)

My only idea would be to have a div, with a bunch of inline divs that are translated on click. Would that be the right approach?

Or is there an easy way to manipulate the built in carousel?

Codepen for where I am at so far.

http://codepen.io/OMGDrAcula/pen/eJjgwN

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}

.item{
    background: white;    
    text-align: center;
    height: 300px !important;
    display: inline-block;
}

.carousel{
    margin-top: 20px;
}

.bs-example{
	margin: 20px;
}

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel">
    	<!-- 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>
        </ol>   
       <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item col-lg-3 carousel-fade">
                <h2>Slide 1</h2>
                <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item col-lg-3 carousel-fade">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
            <div class="item col-lg-3 carousel-fade">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</body>
</html>

OMGDrAcula over 8 years

Awesome thank you so much I will take a look at it! I appreciate all the help!
Martin McKeaveney over 8 years

My pleasure. Hope you manage to get it looking how you want it!