"Infinite carousel (loop) multi-Item"
Bootstrap 3.2.0 Snippet by bstahl

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 class="col-md-12"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/acacia-ave-carlsbad-ca-92008/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/10/Screen-Shot-2016-10-24-at-9.05.57-AM-624x277.png" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Acacia Avenue</strong> <span>Carlsbad, CA 92008</span> <div class="holder"> <ul> <li>1 bed</li> <li>1 bath</li> <li>1000 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/kandace-way-san-diego-ca-92105/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/12/2728-kandace-way-011-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Kandace Way</strong> <span>San Diego , CA 92105</span> <div class="holder"> <ul> <li>4 bed</li> <li>3 bath</li> <li>1,684 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/ocean-front-walk-unit-8-san-diego-ca-92109/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/11/3755-ocean-front-walk-8-041-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Ocean Front Walk Unit 8</strong> <span>San Diego, CA 92109</span> <div class="holder"> <ul> <li>2 bed</li> <li>1 bath</li> <li>784 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/33rd-street-san-diego-ca-92116/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/07/4537-33rd-st-004-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">33rd Street</strong> <span>San Diego, CA 92116</span> <div class="holder"> <ul> <li>4 bed</li> <li>2 bath</li> <li>1,520 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/teasdale-avenue-san-diego-ca-92122/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/12/7157-teasdale-ave-003-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Teasdale Avenue</strong> <span>San Diego, CA 92122</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,224 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/westland-avenue-san-diego-ca-92104/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/12/2271-westland-ave-002-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Westland Avenue</strong> <span>San Diego, CA 92104</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,276 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/madison-avenue-lemon-grove-ca-91945/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/12/7518-madison-ave-004-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Madison Avenue</strong> <span>Lemon Grove, CA 91945</span> <div class="holder"> <ul> <li>2 bed</li> <li>1 bath</li> <li>988 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/paseo-del-norte-unit-d-carlsbad-92011/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/09/6575-paseo-del-norte-001-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Paseo Del Norte</strong> <span>Carlsbad, CA 92011</span> <div class="holder"> <ul> <li>2 bed</li> <li>2 bath</li> <li>959 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/radio-court-san-diego-ca-92114/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/08/5787-radio-ct-006-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Radio Court</strong> <span>San Diego, CA 92114</span> <div class="holder"> <ul> <li>4 bed</li> <li>2 bath</li> <li>1,588 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/cecilwood-drive-santee-ca-92071/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/09/9513-cecilwood-dr-008-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Cecilwood Drive</strong> <span>Santee, CA 92071</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,274 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/conrad-avenue-san-diego-ca-92117/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/09/4561-conrad-ave-001-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Conrad Avenue</strong> <span>San Diego, CA 92117</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,176 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/avenida-amantea-la-jolla-ca-92037/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/09/1155-avenida-amantea-001-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Avenida Amantea</strong> <span>La Jolla, CA 92037</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,644 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/via-borregos-carlsbad-ca-92009/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/04/6886-via-borregos-002-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Via Borregos</strong> <span>Carlsbad, CA 92009</span> <div class="holder"> <ul> <li>3 bed</li> <li>3 bath</li> <li>2,553 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/robbiejean-pl-el-cajon-ca-92019/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/10/1559-robbiejean-pl-004-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Robbiejean Place</strong> <span>El Cajon, CA 92019</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,283 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/anchorage-lane-san-diego-ca-92106/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/01/1150-anchorage-ln-407-002-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Anchorage Lane #407</strong> <span>San Diego, CA 92106</span> <div class="holder"> <ul> <li>2 bed</li> <li>2 bath</li> <li>1,658 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/tocayo-avenue-unit-14-chula-vista-92154/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/07/2384-tocayo-ave-124-006-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Tocayo Avenue Unit 124</strong> <span>Chula Vista, CA 92154</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,224 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/kansas-street-san-diego-ca-92116/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/05/4726-kansas-st-005-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Kansas Street</strong> <span>San Diego, CA 92116</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,695 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/bothe-ave-san-diego-ca-92122/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/05/5275-bothe-ave-005-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Bothe Ave</strong> <span>San Diego, CA 92122</span> <div class="holder"> <ul> <li>4 bed</li> <li>3 bath</li> <li>2,626 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/lake-apopka-place-san-diego-ca-92119/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/11/6374-lake-apopka-pl-001-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Lake Apopka Place</strong> <span>San Diego , CA 92119</span> <div class="holder"> <ul> <li>5 bed</li> <li>3 bath</li> <li>2,459 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/millwood-rd-san-diego-ca-92117/"><img src="http://www.cthomesllc.com/wp-content/uploads/2017/01/5125-millwood-rd-001-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Millwood Road</strong> <span>San Diego, CA 92117</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,382 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/torrey-pines-road-unit-1001-la-jolla-ca-92037/"><img src="http://www.cthomesllc.com/wp-content/uploads/2017/01/2500-torrey-pines-rd-1001-023-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Torrey Pines Road Unit #1001</strong> <span>La Jolla, CA 92037</span> <div class="holder"> <ul> <li>2 bed</li> <li>2 bath</li> <li>1,344 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/barbarossa-drive-san-diego-92115/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/04/4761-barbarossa-dr-005-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Barbarossa Drive</strong> <span>San Diego, CA 92115</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,633 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/renaissance-avenue-san-diego-ca-92122/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/03/5230-renaissance-ave-030-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Renaissance Avenue</strong> <span>San Diego , CA 92122</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>2,706 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/cordova-street-san-diego-ca-92107/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/10/Screen-Shot-2016-10-24-at-9.06.25-AM-624x350.png" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Cordova Street</strong> <span>San Diego , CA 92107</span> <div class="holder"> <ul> <li>3 bed</li> <li>3 bath</li> <li>2,376 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/36th-street-unit-6-san-diego-ca-92104/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/02/4468-36th-st-6-010-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">36th Street Unit 6</strong> <span>San Diego, CA 92104</span> <div class="holder"> <ul> <li>2 bed</li> <li>2 bath</li> <li>851 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/brems-street-san-diego-ca-92115/"><img src="http://www.cthomesllc.com/wp-content/uploads/2015/12/3736-brems-st-008_web-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Brems Street</strong> <span>San Diego, CA 92115</span> <div class="holder"> <ul> <li>3 bed</li> <li>1 bath</li> <li>1,044 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/villas-dr-bonita-ca-91902/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/07/4574-villas-dr-001-624x417.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Villas Drive</strong> <span>Bonita, CA 91902</span> <div class="holder"> <ul> <li>2 bed</li> <li>2 bath</li> <li>1,164 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/colina-drive-la-mesa-ca-91942/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/02/4958-colina-dr-033_web-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Colina Drive</strong> <span>La Mesa, CA 91942</span> <div class="holder"> <ul> <li>3 bed</li> <li>3 bath</li> <li>1,858 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/avenida-villaha-unit-83-san-diego-ca-92128/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/05/15905-avenida-villaha-83-002-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Avenida Villaha Unit 83</strong> <span>San Diego, CA 92128</span> <div class="holder"> <ul> <li>3 bed</li> <li>2 bath</li> <li>1,622 sq ft</li> </ul> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <a href="http://www.cthomesllc.com/property/via-mallorca-unit-h-san-diego-ca-92037/"><img src="http://www.cthomesllc.com/wp-content/uploads/2016/04/8628-via-mallorca-009-624x416.jpg" class="img-responsive"></a></div> <div class="box"> <strong class="ttl">Via Mallorca</strong> <span>San Diego, CA 92037</span> <div class="holder"> <ul> <li>1 bed</li> <li>1 bath</li> <li>504 sq ft</li> </ul> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div>
.carousel-inner .active.left { left: -33%; } .carousel-inner .next { left: 33%; } .carousel-inner .prev { left: -33%; } .carousel-control.left,.carousel-control.right {background-image:none;} .item:not(.prev) {visibility: visible;} .item.right:not(.prev) {visibility: hidden;} .rightest{ visibility: visible;}
$('#myCarousel').carousel({ interval: 40000 }); $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest'); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });

Related: See More


Questions / Comments: