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!
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.
Second, CSS
CSS
, instead, we just included the carousel styling part, minified version: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:If you don't use any
CSS
framework plugin, you might need to change them to suit your taste.
Third, JavaScript
Library
JavaScript
library after the CSS
and before the HTML
element. It looks like this:Fourth, HTML
Elements
url
of the images with your own images, and change the caption text.Then, to enable the automatic carousel slide:
- Via
data-[attribute]
:
Adddata-ride="carousel"
parameter. Then put the duration value in thedata-interval="[number_in_milliseconds]"
.Example
data-interval="3000"
- Via
JavaScript
: look at the fifth step below.
Fifth, Invocation from JavaScript
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
:And you're done!
Remember to include the jQuery library before the Bootstrap JS library.
Links
- Bootstrap Carousel documentation
- Bootstrap CDN
No comments
Post a Comment