Search code examples
jquerytwitter-bootstrapcarouselconcrete5

Bootstrap carousel collapse when slide left on first image

Hey guys i tried to search but couldnt find anything. Im trying to setup a twitter bootstrap carousel with 3 images, everything works fine until you try to slide left when your on image 1, it seems like the "active" class disappears. To see live example visit patfred.se go to portfolio and click an image and you will see the carousel.

Here is my code.

<div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
   <div class="carousel-inner">
   <div class="active item"><img src="<?php echo DIR_REL . $c->getAttribute('picture1'); ?>"> </img></div>
   <div class="item"><img src="<?php echo DIR_REL . $c->getAttribute('picture2'); ?>"> </img></div>
   <div class="item"><div class="item"><img src="<?php echo DIR_REL . $c->getAttribute('picture3'); ?>"> </img></div></div></div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<p class="portfolio-info"> <?php echo $c->getCollectionDescription(); ?></p>
<a href="<?php echo $c->getAttribute('out_link'); ?>" target="_blank">Gå till sidan</a>
Solution

  • There is a minor mistake in your markup. All you need to do is, remove the .item div inside of .item div.

    markup