Bootstrap Snippet carousel 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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="row" id="slider">
    <div class="col-md-12">
      <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="active item" data-slide-number="0">
            <img src="http://placehold.it/1200x480&text=1">
          </div>
          <div class="item" data-slide-number="1">
            <img src="http://placehold.it/1200x480&text=2">
          </div>
          <div class="item" data-slide-number="2">
            <img src="http://placehold.it/1200x480&text=3">
          </div>
          <div class="item" data-slide-number="3">
            <img src="http://placehold.it/1200x480&text=4">
          </div>
          <div class="item" data-slide-number="4">
            <img src="http://placehold.it/1200x480&text=5">
          </div>
          <div class="item" data-slide-number="5">
            <img src="http://placehold.it/1200x480&text=6">
          </div>
          <div class="item" data-slide-number="6">
            <img src="http://placehold.it/1200x480&text=7">
          </div>
          <div class="item" data-slide-number="7">
            <img src="http://placehold.it/1200x480&text=8">
          </div>
        </div>
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.list-inline {
  text-align: center;
}
.list-inline > li {
  margin: 10px 5px;
  padding: 0;
}
.list-inline > li:hover {
  cursor: pointer;
}
.list-inline .selected img {
  opacity: 1;
  border-radius: 15px;
}
.list-inline img {
  opacity: 0.5;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.list-inline img:hover {
  opacity: 1;
}
.item > img {
  max-width: 100%;
  height: auto;
  display: block;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
$('#myCarousel').carousel({
    interval: 3500
});
// This event fires immediately when the slide instance method is invoked.
$('#myCarousel').on('slide.bs.carousel', function (e) {
    var id = $('.item.active').data('slide-number');
        
    // Added a statement to make sure the carousel loops correct
        if(e.direction == 'right'){
        id = parseInt(id) - 1;  
      if(id == -1) id = 7;
    } else{
        id = parseInt(id) + 1;
        if(id == $('[id^=carousel-thumb-]').length) id = 0;
    }
  
    $('[id^=carousel-thumb-]').removeClass('selected');
    $('[id=carousel-thumb-' + id + ']').addClass('selected');
});
// Thumb control
$('[id^=carousel-thumb-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-thumb-]').removeClass('selected');
  $(this).addClass('selected');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"carousel"
Bootstrap 3.0.0 Snippet by karimsharf12252

Related: See More

Questions / Comments:

"carousel" Bootstrap 3.0.0 Snippet by karimsharf12252

Related: See More

Questions / Comments:

"carousel"
Bootstrap 3.0.0 Snippet by karimsharf12252