Bootstrap Snippet 1 Infinite carousel (loop) multi-Item using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 active">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/sports" class="img-responsive">1</a></div>
                </div>
                <div class="item">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/cats" class="img-responsive">2</a></div>
                </div>
                <div class="item">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/food" class="img-responsive">3</a></div>
                </div>
                <div class="item">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/city" class="img-responsive">4</a></div>
                </div>
                <div class="item">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/sports" class="img-responsive">5</a></div>
                </div>
                <div class="item">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/cats" class="img-responsive">6</a></div>
                </div>
                <div class="item">
                  <div class="col-lg-2 col-xs-2 col-md-2 col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/200/100/food" class="img-responsive">7</a></div>
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
.carousel-inner .active.left { left: -16.7%; }
.carousel-inner .next        { left:  16.7%; }
.carousel-inner .prev        { left: -16.7%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.item:not(.prev) {visibility: visible;}
.item.right:not(.prev) {visibility: hidden;}
.rightest{ visibility: visible;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#myCarousel').carousel({
  interval: 5000
  , pause: 'hover'
  , wrap: true
});
$('.carousel .item').each(function(){
    var next = $(this);
    var last;
    for (var i=0;i<5;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        
        last=next.children(':first-child').clone().appendTo($(this));
    }
    last.addClass('rightest');
 
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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