Bootstrap Snippet Carousel with outside indicators using HTML CSS jQuery

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/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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">
      <div class="span12 carousel-container">
          <div id="carousel" class="carousel slide carousel-fade">
            <!-- Carousel items -->
            <div class="carousel-inner">
              <div data-slide-no="0" class="item carousel-item active">
                <img src="http://lorempixel.com/1920/1080/animals" alt="">
                <div class="carousel-caption">
                  <h4>We Help You Estimate!</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div data-slide-no="1" class="item carousel-item">
                <img src="http://lorempixel.com/1920/1080/food" alt="">
                <div class="carousel-caption">
                  <h4>second thumbnail</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div data-slide-no="2" class="item carousel-item">
                <img src="http://lorempixel.com/1920/1080/cats" alt="">
                <div class="carousel-caption">
                  <h4>Third Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
            <a class="carousel-control right" href="#carousel" data-slide="next">›</a>
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
31
32
33
34
35
36
37
.carousel>.carousel-inner>.item>.circleElement {
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 11%;
    left: 39%;
    width: 400px;
    height: 400px;
    opacity: .5;
}
.carousel-indicators {
    top: 35px;
    background: #404549;
    padding: 30px;
    border-radius: 10px;
}
.carousel-indicators li { cursor: pointer }
.carousel-control {
    width: 60px;
    height: 0;
    margin-top: -20px;
    font-size: 100px;
    background: none;
    border: none;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}
.carousel-indicators li {
    background-color: #999;
    background-color: rgba(255,255,255,0.3);
}
.carousel-caption {
    padding: 35px;
    text-align: center;
}
.carousel-caption h4 {
    font-family: "lato";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Generated by CoffeeScript 1.7.1
$(document).ready(function() {
  $(".carousel").carousel({
    interval: 2000
  });
  $(".carousel").on("slid", function() {
    var to_slide;
    to_slide = $(".carousel-item.active").attr("data-slide-no");
    $(".myCarousel-target.active").removeClass("active");
    $(".carousel-indicators [data-slide-to=" + to_slide + "]").addClass("active");
  });
  $(".myCarousel-target").on("click", function() {
    $(this).preventDefault();
    $(".carousel").carousel(parseInt($(this).attr("data-slide-to")));
    $(".myCarousel-target.active").removeClass("active");
    $(this).addClass("active");
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Carousel with outside indicators"
Bootstrap 2.3.2 Snippet by skykog

Related: See More

Questions / Comments:

"Carousel with outside indicators" Bootstrap 2.3.2 Snippet by skykog

Related: See More

Questions / Comments:

"Carousel with outside indicators"
Bootstrap 2.3.2 Snippet by skykog