"News Carousel"
Bootstrap 3.1.0 Snippet by sevenx.de

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/760x400/cccccc/ffffff"> <div class="carousel-caption"> <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> <h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> <h4><a href="#">tempor invidunt ut labore et dolore</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> <h4><a href="#">magna aliquyam erat, sed diam voluptua</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="list-group col-sm-4"> <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li> <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li> <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li> <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li> <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>tempor invidunt ut labore et dolore magna aliquyam erat</h4></li> </ul> <!-- Controls --> <div class="carousel-controls"> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!-- End Carousel --> </div>
body { padding-top: 50px; } #myCarousel .carousel-caption { left:0; right:0; bottom:0; text-align:left; padding:10px; background:rgba(0,0,0,0.6); text-shadow:none; } #myCarousel .list-group { position:absolute; top:0; right:0; } #myCarousel .list-group-item { border-radius:0px; cursor:pointer; } #myCarousel .list-group .active { background-color:#eee; } @media (min-width: 992px) { #myCarousel {padding-right:33.3333%;} #myCarousel .carousel-controls {display:none;} } @media (max-width: 991px) { .carousel-caption p, #myCarousel .list-group {display:none;} }
$(document).ready(function(){ var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); }) $(window).load(function() { var boxheight = $('#myCarousel .carousel-inner').innerHeight(); var itemlength = $('#myCarousel .item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('#myCarousel .list-group-item').outerHeight(triggerheight); });

Related: See More


Questions / Comments:

Hi,

Please anyone knows how to add multiple "news Carousel" sliders to a web page. This example is not seems working for multiple usage. How can I update this code for multiple usage.

Please help???

yasitha Nawagamuwa () - 8 years ago - Reply 0


in order to solve it just replace the css class #myCarousel .list-group .active with #myCarousel .list-group-item .active

and then edit the 1st js function with the next function

$(document).ready(function () {

var clickEvent = false;

var count = 0;

var co = $('#myCarousel').children();

count = co[0].childElementCount - 1;

$('#myCarousel').carousel({

interval: 4000

}).on('click', '.list-group li', function () {

clickEvent = true;

$('.list-group li').removeClass('active');

$(this).addClass('active');

}).on('slid.bs.carousel', function (e) {

if (!clickEvent) {

var current = $('.list-group li.active');

var current1 = $('.list-group-item lactive');

current.removeClass('active').next().addClass('active');

current1.removeClass('active').next().addClass('active');

var id = parseInt(current.data('slide-to'));

if (count == id) {

$('.list-group li').first().addClass('active');

console.log($('.list-group li').first());

}

if (count == id) {

$('.list-group-item').first().addClass('active');

}

}

clickEvent = false;

});

})

AgentC004 () - 8 years ago - Reply 0


If I want to use bigger sized pictures, what does this imply concerning the code ? The inconvenience seems to be that the text covers a part of the image. And : How do I put the text below the image ? (I must admit that I am a newbie. Concerning the pictures I have some which are in portrait, other in landscape format - seems to be quite difficult to fit them together ... - Would even say in this sample portrait sized pictures would be even more convenient ... )

Franz Fakler () - 9 years ago - Reply 0


How can this made to hover when you move ur mouse instead of click

Arka () - 9 years ago - Reply 0


The sliding works perfect, but no matter which button I'm pressing the first one (Lorem ipsum) keeps being selected. What do I need to do?

Даулет Амирханов () - 9 years ago - Reply 0


is there any answer to this question?

The sliding works perfect, but no matter which button I'm pressing the first one (Lorem ipsum) keeps being selected. What do I need to do?

DBen (-1) - 5 years ago - Reply -1


Change the trigger box resizing to a function and call it on load and resize. Works well for me.

$(window).resize(function() {
setTriggerHeight();
});
$(window).load(function() {
setTriggerHeight();
});
function setTriggerHeight() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
}

Andy Urban () - 10 years ago - Reply 0


This resolved the resizing issue for me in Chrome, Firefox, and Safari for Mac. Thanks.

Chris Rouse () - 9 years ago - Reply 0


In the JS
var triggerheight = Math.round(boxheight/itemlength+1);
replace
var triggerheight = Math.round(boxheight/itemlength+81);

Jorge Tuyin () - 10 years ago - Reply 0


thank you it's sooooooooooooooo great

gheith () - 10 years ago - Reply 0


Here is the fix:
http://bootsnipp.com/snippe...
Move the code that change the items height to a window.load function.
If there is another way to do that, please tell me.

Jean Brito () - 10 years ago - Reply 0


This thing is still broken, does anybody at bootsnipp care?

Mikel () - 10 years ago - Reply 0


still broken

Christopher Thomas () - 10 years ago - Reply 0


I don't think anybody cares. I would love to use this and have spent some time trying to fix it to no avail. It needs to be removed if it doesn't work

Jeremy () - 10 years ago - Reply 0


It's broken

Kevin Henson () - 10 years ago - Reply 0


Doesn't work on Safari or Firefox. List items are scrunched together. Refreshing does not help

abrudtkuhl () - 10 years ago - Reply 0


Sometimes it needs a page refresh for some reason... try doing that and seeing it again.

maxsurguy () - 10 years ago - Reply 0


This is cool but it doesn't work at all in Safari and doesn't work consistently in Chrome/Firefox. It's even broken on the bootsnipp page for me with Safari.

Dan Butler () - 10 years ago - Reply 0


Beautiful carousel but I'm having some problems as well. . .

Not sure if I'm experiencing the same issue but sometimes when it loads the list box items are all scrunched together. Sometimes a refresh fixes but sometimes not, it's very inconstant.

Jeremy () - 10 years ago - Reply 0


Has anyone found a fix for this issue?

jayydellyy () - 10 years ago - Reply 0


Great Job!

I'll definitely be using this!

Thanks

Kraymer () - 10 years ago - Reply 0


Dude, That is amazing well done!

Kevin Henson () - 10 years ago - Reply 0


awesome

aashik () - 10 years ago - Reply 0