Bootstrap Snippet TEST Carousel with jQuery using HTML CSS Bootstrap 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!--
Todo:
1- make a  mobile light weight version
2-add jquery options
-->
<div class="container">
    <div class="row">
        <p>Best viewed <a href="http://bootsnipp.com/iframe/NxzDp" target="_blank">full screen</a>
    </p>
    <div class="col-md-8">
        <div class="bs-example">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Carousel indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <img src="https://durian.blender.org/wp-content/uploads/2010/06/dragon-concept-art_008.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="item">
                        <img src="https://durian.blender.org/wp-content/uploads/2010/06/dragon-concept-art_010.jpg" class="img-responsive"  alt="">
                    </div>
                    <div class="item">
                        <img src="https://durian.blender.org/wp-content/uploads/2010/06/dragon-concept-art_004.jpg" class="img-responsive"   alt="" >
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
/*
ref: http://stackoverflow.com/questions/20746461/how-do-you-remove-the-default-bootstrap-3-carousel-control-background-gradients 
*/
.carousel-control.left, .carousel-control.right {
    background-image: none
}
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    heightxxx: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
    margin: 20px;
}
.carousel .item {
    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
    -ms-transition: opacity 3s; 
    -o-transition: opacity 3s; 
    transition: opacity 3s;
}
.carousel .active.left {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
// excellent optoin for c. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php
$(document).ready(function(){
     $("#myCarousel").carousel({
         interval : false,
         pause: true,
         keyboard: true
     });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST Carousel with jQuery"
Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST Carousel with jQuery" Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST Carousel with jQuery"
Bootstrap 3.3.0 Snippet by mrmccormack