18

I've been playing with the bootstrap carousel, trying to make it display 4 columns per slide, responsively. The responsive side of things is perfect, however when the last slide slides the carousel isn't wrapping back to the first slide. It just disappears. Can anyone identify the problem?

HTML

<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>
</ol>

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

JS

$('#carousel-example-generic').carousel();

CSS

.carousel.slide img {
    width:100%;
    height:auto;
}

jsFiddle

[update] Here's an updated jsFiddle that works - thanks to Adrift!

[update2] http://jsfiddle.net/S2rnm/795/ this version responsively shows a different carousel containing 4, 2 or 1 column depending on device size. It requires 3 carousel's each with different visible-x class.

gpcola
  • 969
  • 5
  • 15
  • 26

2 Answers2

16

The problem is that you have the carousel controls within .carousel-inner - you just need to place them outside of this class:

  </div> <!-- Close the .carousel-inner class before the 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>

Example: http://jsfiddle.net/S2rnm/789/

Adrift
  • 58,167
  • 12
  • 92
  • 90
  • 1
    I've updated my question with Adrift's fixed code plus another version that show's different amount of columns per device size. Requires 3 different carousel's however... – gpcola Sep 13 '13 at 13:25
0

I try this code working proper 

<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap-theme.min.css" />
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_squid.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_octopus.jpg" alt="Image" class="img-responsive"></a>
                </div>
                    <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/reef_cod.jpg" alt="Image" class="img-responsive"></a>
                </div>
            </div>
            <!--/row-->
        </div>
        <!--/item-->
        <div class="item">
            <div class="row">
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/leather_jacktfish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/ribbonfish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/croaker1.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/shrimp_black_tiger.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
                </div>
            </div>
            <!--/row-->
        </div>
        <!--/item-->
    </div>
    <!--/carousel-inner--> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
</div>
Pankaj Upadhyay
  • 2,114
  • 21
  • 22