Bootstrap comes with tons of great, ready-to-use components right out of the box. The true beauty of the framework, however, lies in the ability to build additional functionality for those features with relative ease. This especially rings true in elements like the built-in carousel/slider.
For example, say your proposed site design doesn’t necessarily require a slideshow to infinitely scroll leftward (as is the default setting), or maybe you need to cycle several items within a single group. This and other techniques can be simple to achieve with Bootstrap’s inherent accommodations to your supplemental styles and markup. The same idea can of course be applied to the other built in components, but let’s take a look at a few small carousel examples to get started with refining Bootstrap to fit your needs!
Jump to:
Applying Other Transition Animations
Rotate Through Groups of Items
Create a Fullscreen Background Slider
Download Source Files for All Demos
Applying Other Transition Animations
Carousel’s Javascript initialization doesn’t include a set of animation options like many jQuery sliders available online. Not a problem; they can very easily be adopted into Bootstrap with the help of CSS3’s transition attribute .
First, the base carousel markup, which is a pretty standard setup:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| < < < < < < </ < < <div class="active item"><img src="assets/img/slide1.jpg" alt="" /></div> <div class="item"><img src="assets/img/slide2.jpg" alt="" /></div> <div class="item"><img src="assets/img/slide3.jpg" alt="" /></div> </ < < <</ |
Now for the CSS to make the fade happen, where a transition time of 1 second is set:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| } - - - - } } } |
Finally, a small bit of initialization in your header to establish a 7-second pause time between transitions:
1
2
3
4
5
| < $ $ });</ |
That’s it! Check out the demo to see it in action.
View The Demo
Rotate Through Groups of Items
The carousel function doesn’t have to be limited to single divs or images. We can cycle through and showcase small clusters of items, one group at a time, by taking advantage of Bootstrap’s dynamic grid layout. This can also be useful for creating a row of thumbnails to potentially interact with another carousel or component within the page.
You’ll be writing a bit more this time to accommodate for several more items in the carousel. The markup itself stays relatively simple, though. Here we have it setup like a “new product” showcase:
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| < < < < < < < < </ < < < </ < < < </ < < < </ < < < </ < < < </ < < < </ < < < </ </ </ < < < < < </ < < < </ < < < </ < < < </ < < < </ < < < </ < < < </ < < < </ </ </ </ < < </</ |
To maintain a smooth scroll between groups, it’s recommended that all thumbnails are a consistent size. With CSS, we can make any image conform proportionally to the thumbnail box:
1
2
3
4
5
6
7
8
9
10
11
| - -} |
Remember to initialize the JS function, but no timer is necessary this time around:
1
2
3
4
5
| < $ $ });</ |
Check out the demo to see it in action.
View The Demo
Create a Fullscreen Background Slider
With the right group of photos, an ever-alternating background can quite beautifully maintain an interesting aesthetic to a site’s design. Using the opacity transition learned earlier, here’s how to apply this technique on a larger scale.
The HTML here is the easiest in this tutorial. This will make more sense in just a moment, but notice that there aren’t actually any images called here:
1
2
3
4
5
6
7
| < < <div class="active item one"></div> <div class="item two"></div> <div class="item three"></div> </</ |
This is where everything happens. Your stylesheet will utilize the opacity transition we experimented with earlier to work in conjunction with another CSS3 feature, the background-size condition. This added attribute ensures the background will scale cleanly with different browser sizes:
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
| .carousel { z-index: -99; } /* keeps this behind all content */ position: fixed; width: 100%; height: 100%; - - - - }.carousel .one { background: url(assets/img/slide3blur.jpg); background-size: cover; -moz-background-size: cover;}.carousel .two { background: url(assets/img/slide2blur.jpg); background-size: cover; -moz-background-size: cover;}.carousel .three { background: url(assets/img/slide1blur.jpg); background-size: cover; -moz-background-size: cover;}.carousel .active.left { } |
So, the images are referenced here instead of the main markup. This is because background-size will do what we need without us having to add some Javascript to get the scaling right. Notice that it’s repeated for each item class. It seems cumbersome, but it is necessary since declaring a class’s background image tends to reset the background-size setting, even when background-size is attempted universally in the “.item” class.
Return to the Javascript of the first demo to establish the pause timer:
1
2
3
4
5
| < $ $ });</ |
Check out the demo to see it in action.
View The Demo
Source: http://untame.net/2013/04/twitter-bootstrap-carousel/
