7

I am trying out Twitter bootstrap 3. I am quite new to HTML, CSS and Javascript. I have a carousel which i created and it's code looks like so:

<div class="container">
    <div id="myCarousel2" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                </div>
            </div>
            <div class="item">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                </div>
            </div>
        </div>
        <!-- /INNER-->
        <!-- Carousel nav -->

        <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>

    </div>
</div>

Now this is set to show 4 images at a time. The thing is I have 8 images. In the carousel above it displays 4 images at a time and then slides to the next 4. Here's the Javascript:

<script type="text/javascript">
$('.carousel.slide').carousel()
</script>

And the CSS:

@media (max-width: 767px){
.carousel .row .span3 {
display: block;
float: left;
width: 25%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
    }
}
.carousel .carousel-control { visibility: hidden; }

How do I get the images to move only one-at-a-time in a continuous loop?

rahuL
  • 3,330
  • 11
  • 54
  • 79
  • Do you want it to display only one at a time, or display 4 but only move 1 along? – SharkofMirkwood Oct 27 '13 at 16:02
  • @SharkofMirkwood - display 4 but only move 1 along sounds exactly what I want to do.. – rahuL Oct 27 '13 at 16:05
  • Ah right, I apologise then, I don't know how to do that with Bootstrap's carousel. Not sure it's possible, to be honest. Of course, only displaying one at a time would have been much easier! – SharkofMirkwood Oct 27 '13 at 16:09
  • Would it be possible if I had 4 carousels side by side, each displaying one image and hide the indicator icons? – rahuL Oct 27 '13 at 16:13

1 Answers1

11

Take a look at this Bootply: http://bootply.com/94452

You can use jQuery to clone() the items accordingly..

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

Alternative option: Bootstrap carousel multiple frames at once

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Nice, thanks for the example! I'm having a little bit of trouble, I am using the code you placed in the bootply link above, and for some reason, I only see one image at a time, instead of seeing however many images would be able to fit in the carousel. I haven't changed any of your code, yet it doesn't look like the example at that link. Can you think of what might be going wrong for me? – Jake Smith Feb 25 '14 at 16:14
  • @JakeSmith I had the same issue. I also forgot to add the jquery part on my script too. Make sure you add that as well. – Dynelight Feb 26 '14 at 19:03
  • @Dynelight, thanks for responding :) This might be a dumb question, but are you referring to just referencing the jquery libraries in my html somewhere? Am I just missing some jquery functionality by not including those libraries explicitly? – Jake Smith Feb 27 '14 at 20:00
  • @JakeSmith Look at the top middle column, there is a jQuery snippet that needs to go in tags. – Dynelight Feb 27 '14 at 21:06
  • Are you referring to the one in the question above? I don't see any – Jake Smith Feb 28 '14 at 05:40
  • It seems that bootstrap 3.1.1 is a little different than the 3.0.2 used in the bootply demo in how it treats these carousel controls. When it shifts the items, it shifts them four at a time. – Jake Smith Feb 28 '14 at 06:38
  • Did you include the JS and CSS from the demo? I changed the demo version to 3.1.1 and it still works fine (one at a time) – Carol Skelly Feb 28 '14 at 10:12
  • yea, I verified that the js in the bootply's html in Inspect Element only differed in that it was surrounded by a "document ready" and so I'm still using that JS. I also copied the css from the demo into the respective css file that corresponds with the page I'm putting the carousel in for now. Now trying it today, I get it moving to the right by 1 item but moving it left still moves 4 at a time. I wish I knew how to debug this better... – Jake Smith Feb 28 '14 at 18:57
  • I've got it working for the most part, I think. However, there are two `.item .active`s that move to the left, one after the other. – Jake Smith Mar 04 '14 at 08:46
  • also, how can we get the left button to go back one and not back four items? – Jake Smith Mar 04 '14 at 08:58
  • Add `.carousel-inner .prev { left: -25%; }` to the CSS. I updated the demo: http://www.bootply.com/94452 – Carol Skelly Apr 01 '14 at 12:11
  • Clicking the 'right' button works pefectly. But clicking the 'left' button (i.e. go backwards) causes the images to all skip and slide in a strange way. On latest version of Chrome. This is occurring in the bootply.com example. – Laurence Aug 08 '14 at 13:26
  • Right click works perfect, left click crashes the effect. Please correct the code. – paulalexandru Jan 20 '15 at 14:04