Skip to content

Instantly share code, notes, and snippets.

@Colir
Created February 2, 2013 19:09
Show Gist options
  • Save Colir/4698850 to your computer and use it in GitHub Desktop.
Save Colir/4698850 to your computer and use it in GitHub Desktop.
A CodePen by Colir. Cycle2 Carousel on Bootstrap
<div class="container">
<div class="row cycle-slideshow" data-cycle-fx=carousel data-cycle-timeout=1000 data-cycle-carousel-visible=6 data-cycle-carousel-fluid=true data-cycle-slides="div">
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
<div class="span2"><img src="http://lorempixel.com/200/200/"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.carousel.js"></script>
//$( '.slideshow' ).cycle();
.container{overflow:hidden;}
.cycle-slideshow img{width:auto;height:auto;}
/*padding tricks
nb-visible-item X gutter width
*/
@media (min-width: 1200px) {
.cycle-slideshow{padding-right:180px;}
}
@media (min-width: 768px) and (max-width: 1199px) {
.cycle-slideshow{padding-right:120px;}
}
@media (max-width: 767px) {
.cycle-slideshow{padding-right:0px;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment