Monkey Raptor

Monday, September 16, 2013

Using Bootstrap Carousel: Image Slider

Neat Bootstrap

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.

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:

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:
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:
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:
Or, using Bootstrap CDN:

Fourth, HTML Elements

There are 5 images on the demo above, and not using the automatic slideshow. The component elements look like this:
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:
To adjust the automatic slideshow duration via JavaScript, do this:

The interval number is in millisecond unit.

And you're done!

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

Links

Using Bootstrap Carousel: Image Slider
https://monkeyraptor.johanpaul.net/2013/09/using-bootstrap-carousel-image-slider.html

No comments

Post a Comment

Tell me what you think...