"jQuery Vertical Carousel"
Bootstrap 3.0.0 Snippet by foysal991

Post to Facebook Tweet this

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="verticalCarousel">
<div class="verticalCarouselHeader">
<h3>Recent Articles</h3>
<a href="#" class="vc_goDown"><i class="fa fa-fw fa-angle-down"></i></a>
<a href="#" class="vc_goUp"><i class="fa fa-fw fa-angle-up"></i></a>
</div>
<ul class="verticalCarouselGroup vc_list">
<li>
<h4>Article 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h4>Article 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h4>Article 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h4>Article 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h4>Article 5</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
</div>
</div>
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
/* line 9, ../sass/style.scss */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 13, ../sass/style.scss */
body {
font-size: 15px;
line-height: 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background-color:#16A085;
}
/* line 19, ../sass/style.scss */
.verticalCarousel {
margin: 50px auto;
max-width: 500px;
background-color: #f1f1f1;
}
/* line 24, ../sass/style.scss */
.verticalCarouselHeader {
background: #e1e1e1;
border-width: 0px;
border-style: solid;
padding: 15px;
}
/* line 27, ../sass/style.scss */
.verticalCarouselHeader:after {
content: "";
display: block;
clear: both;
}
/* line 32, ../sass/style.scss */
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
/*!
* jQuery Vertical Carousel
* https://github.com/haripaddu/jQuery-Vertical-Carousel
* Version: 1.0
* License: MIT
*/
(function($) {
$.fn.verticalCarousel = function(options) {
var carouselContainerClass = "vc_container";
var carouselGroupClass = "vc_list";
var carouselGoUpClass = "vc_goUp";
var carouselGoDownClass = "vc_goDown";
var defaults = { currentItem: 1, showItems: 1 };
var options = $.extend(defaults, options);
var carouselContainer;
var carouselGroup;
var carouselUp;
var carouselDown;
var totalItems;
var setContainerHeight = (function(){
var containerHeight = 0;
var marginTop = 0;
if (options.showItems == 1){
containerHeight = $("> :nth-child(" + options.currentItem + ")", carouselGroup).outerHeight(true);
}
else{
for (i = 1; i <= options.showItems; i++) {
containerHeight = containerHeight + $("> :nth-child(" + i + ")", carouselGroup).outerHeight(true);
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard React
Simple Vertical timeline
Bootstrap 4 Carousel
Carousel with Search

Questions / Comments: