Using Bootstrap Carousel: Image Slider

Do you know Bootstrap? Of course you do. It's a super neat front-end framework to build upon from Twitter. It's licensed under MIT License.

It has plenty of pre-built CSS frameworks, great sets of JavaScript (jQuery) libraries, which results lots of sweet cross-browser effects and transitions. It's more like jQuery-UI, but more!

Here, we already use Pure (CSS), combined with jQuery-UI (custom). Bootstrap has already provided all organized and tweaked (CSS and JavaScript). If you're interested to build another website or blog, you may consider to use this framework.
Our suggestion, if you've already implemented Pure or other CSS framework for global architecture, don't override with the entire Bootstrap.css, they will have "collisions" for sure.
You'll find a pretty much unexpected result. To avoid that, all you need to do is just grab a particular component styling you wanna use.

Now, let's try it out!

DEMO
The Simpons fan art images from various artists at www.deviantart.com.

The Simpsons Family

Homer, Marge, Bart, Lisa, Maggie, Santa's Little Helper, and that cat

Bart Dude

The mighty Bart Dude.

Horatio McCallister

Arrrrr.... matey.

Lisa and Bart

While Lisa is dragging Bart.

Surprise!

Mwaaaaaa.

‹ ›

How to Use

First, Resources and Elements Stacking

Download Bootstrap — CSS and JavaScript resources. You can find them at Bootstrap.
Or, use the Bootstrap CDN — just for the JavaScript resource.
Links below this post.

The elements placement will look like this:

<style>The Bootstrap Carousel style + overriding style</style>
<script src="your-host-URL/bootstrap.min.js"></script>

<!-- This line will consist of HTML elements of
     the Bootstrap Carousel using data-[attribute] -->

<!-- This is the script to load the multiple carousels.
     If you just use one, then you don't have to include this -->
<script>
    $('.carousel').carousel();
</script>

Second, CSS

Because we're already using Pure, we didn't include the complete CSS, instead, we just included the carousel styling part, minified version:

.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;height:auto;max-width:100%;line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.6);opacity:.5;filter:alpha(opacity=50)}.carousel-control.left{background-image:-webkit-gradient(linear,0 top,100% top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0.0001)));background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,0.5) 0),color-stop(rgba(0,0,0,0.0001) 100%));background-image:-moz-linear-gradient(left,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.0001) 100%);background-image:linear-gradient(to right,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.0001) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=1)}.carousel-control.right{right:0;left:auto;background-image:-webkit-gradient(linear,0 top,100% top,from(rgba(0,0,0,0.0001)),to(rgba(0,0,0,0.5)));background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,0.0001) 0),color-stop(rgba(0,0,0,0.5) 100%));background-image:-moz-linear-gradient(left,rgba(0,0,0,0.0001) 0,rgba(0,0,0,0.5) 100%);background-image:linear-gradient(to right,rgba(0,0,0,0.0001) 0,rgba(0,0,0,0.5) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=1)}.carousel-control:hover,.carousel-control:focus{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right{position:absolute;top:50%;left:50%;z-index:5;display:inline-block}.carousel-control .icon-prev,.carousel-control .icon-next{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

Here, the carousel is used to show 640 x 480 images (all with the same size), and we wanna override the container a bit, so that the it has a fixed maximum width of 640px plus some other overrides:

#myCarousel { /*outer container, fixed width 640px*/
    width: 640px;
    overflow: hidden;
    margin: 0px     auto;
    color: black;
    padding: 0;
}

a.carousel-control { /*the left-right arrows*/
    top: 45%;
    left: 8px;
    width: 40px;
    height: 40px;
    margin-top: 0px;
    font-size: 48px;
    font-weight: 100;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: #222;
    border: 3px solid #fff;
    border-radius: 50%;
    opacity: 0.3;
}

a.carousel-control.right {
    right: 0px;
}

.carousel-caption { /*override the caption looks*/
    text-align: left;
    background: #111;
    opacity: 0;
    transition: opacity 0.3s;
    padding: 20px;
    border-radius: 20px 20px 0 0;
    bottom: 8px;
}

.carousel-caption h4 { 
    margin: 0;
}

.item.active:hover > .carousel-caption {
    opacity: 0.8;
}

ol.carousel-indicators { /*override the dot indicators*/
    top: 0px;
    left: 52px;
    display: inline-block;
    height: 16px;
}

.carousel-indicators li {
    border-color: #888;
    opacity: 0.3;
    border-width: 2px;
    width: 5px;
    height: 5px;
}

.carousel-indicators li.active {
    width: 7px;
    height: 7px;
}

.carousel-indicators li:hover {
    opacity: 1;
}

Remember, this blog uses Pure. So, the customization above is based on the global styling.
If you don't use any CSS framework plugin, you might need to change them to suit your taste.

Third, JavaScript Library

Include the JavaScript library after the CSS and before the HTML element. It looks like this:

<script src="your-host-URL/bootstrap.min.js"></script>

Or, using Bootstrap CDN:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Fourth, HTML Elements

There are 5 images on the demo above, and not using the automatic slideshow. The component elements look like this:

<!-- the entire image slider -->
<div id="myCarousel" class="carousel slide" data-interval="false">

    <!-- this is the top-left list -->
    <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>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>

    <!-- these are the images and the captions-->
    <div class="carousel-inner">

        <div class="item active">
            <img src="image-URL-1" alt="">
            <div class="carousel-caption">
                <h4>Caption 1 Title</h4>
                <p>Caption 1 description</p>
            </div>
        </div>

        <div class="item">
            <img src="image-URL-2" alt="">
            <div class="carousel-caption">
                <h4>Caption 2 Title</h4>
                <p>Caption 2 description</p>
            </div>
        </div>

        <div class="item">
            <img src="image-URL-3" alt="">
            <div class="carousel-caption">
                <h4>Caption 3 Title</h4>
                <p>Caption 3 description</p>
            </div>
        </div>

        <div class="item">
            <img src="image-URL-4" alt="">
            <div class="carousel-caption">
                <h4>Caption 4 Title</h4>
                <p>Caption 4 description</p>
            </div>
        </div>

        <div class="item">
            <img src="image-URL-5" alt="">
            <div class="carousel-caption">
                <h4>Caption 5 Title</h4>
                <p>Caption 5 description</p>
            </div>
        </div>

    </div>

    <!-- these are the navigation arrows -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

</div>

You need to change the url of the images with your own images, and change the caption text.

Then, to enable the automatic carousel slide:

Via data-[attribute]:
Add data-ride="carousel" parameter. Then put the duration value in the data-interval="[number_in_milliseconds]".
Example
data-interval="3000"
Via JavaScript: look at the fifth step below.

Fifth, Invocation from JavaScript

If you only use one carousel, using the example data-attribute above, then you don't need to include this. This is only for multiple carousels, or you're using the automatic slideshow and declaring the slideshow duration via JavaScript.

Anyway, use this to invoke the carousel feature with JavaScript.
The selector can be ID or class:

<script>
    $('.carousel').carousel();
</script>

To adjust the automatic slideshow duration via JavaScript, do this:

<script>
    $('.carousel').carousel({interval: 3500});
</script>

The interval number is in millisecond unit.

And you're done!

Remember to include the jQuery library before the Bootstrap JS library.

Links

Bootstrap Carousel documentation
Bootstrap CDN

Monkey Raptor

Monkey Raptor

Monday, September 16, 2013