"Multi-Item Vertical Carousel"
Bootstrap 3.2.0 Snippet by sdcarte

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!-- This using Ender Carousel, Thanks to Andreas Nemeseri http://nemeseri.com-->
<!--Bootsnipp by Tobias Zimmermann-->
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-12">
<div class="carousel thin" style="height: 300px;">
<a class="prev"><span class="glyphicon glyphicon-chevron-up"></span></a>
<div class="window">
<ul class="clr">
<li class="item">
<img src="http://lorempixel.com/150/150/sports" alt="#Img desc#" width="150" height="150">
</li>
<li class="item">
<img src="http://lorempixel.com/150/150" alt="#Img desc#" width="150" height="150">
</li>
<li class="item">
<img src="http://lorempixel.com/150/150/sports" alt="#Img desc#" width="150" height="150">
</li>
<li class="item">
<img src="http://lorempixel.com/150/150" alt="#Img desc#" width="150" height="150">
</li>
<li class="item">
<img src="http://lorempixel.com/150/150/sports" alt="#Img desc#" width="150" height="150">
</li>
<li class="item">
<img src="http://lorempixel.com/150/150" alt="#Img desc#" width="150" height="150">
</li>
<li class="item">
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
.thin {
max-width:150px;
}
.carousel > .window {
overflow: hidden;
position: relative;
height: 300px;
}
/*
This is the item wrapper,
it will be animated.
*/
.carousel ul {
list-style: none;
height: 10000px;
top: 0;
left: 0;
position: absolute;
padding: 0px;
}
/*
These are the items
*/
.carousel li {
margin: 3px 0 0;
}
.prev, .next {
font-size: 30px;
width: 100%;
position: relative;
left: 50%;
margin-left: -15px;
}
.carousel li:first-child {
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
!function ($) {
var is,
transition;
// from valentine
is = {
fun: function (f) {
return typeof f === 'function';
},
arr: function (ar) {
return ar instanceof Array;
},
obj: function (o) {
return o instanceof Object && !is.fun(o) && !is.arr(o);
}
};
/*
Based on Bootstrap
Mozilla and Webkit support only
*/
transition = (function () {
var st = document.createElement('div').style,
transitionEnd = 'TransitionEnd',
transitionProp = 'Transition',
support = st.transition !== undefined ||
st.WebkitTransition !== undefined ||
st.MozTransition !== undefined;
return support && {
prop: (function () {
if (st.WebkitTransition !== undefined) {
transitionProp = 'WebkitTransition';
} else if (st.MozTransition !== undefined) {
transitionProp = 'MozTransition';
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: