A CodePen by Colir. Cycle2 Carousel on Bootstrap

index.html

<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>

script.js

//$( '.slideshow' ).cycle();

style.css

.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;}
}