<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>
<script>
$(".verticalCarousel").verticalCarousel({
currentItem: 1,
showItems: 2,
});
</script>
/* 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 */
.verticalCarouselHeader h3 {
float: left;
margin: 0px;
}
/* line 36, ../sass/style.scss */
.verticalCarouselHeader .vc_goUp, .verticalCarouselHeader .vc_goDown {
float: right;
display: block;
width: 25px;
height: 25px;
background: #fff;
text-align: center;
color: #000;
margin-left: 5px;
}
/* line 45, ../sass/style.scss */
.verticalCarouselHeader .vc_goUp:active, .verticalCarouselHeader .vc_goDown:active {
-moz-transform: scale(0.7, 0.7);
-ms-transform: scale(0.7, 0.7);
-webkit-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
/* line 52, ../sass/style.scss */
.verticalCarouselGroup.vc_list > li {
margin: 15px;
border-width: 0px;
border-style: solid;
padding: 15px;
background-color: #fff;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}
/* line 57, ../sass/style.scss */
.verticalCarouselGroup.vc_list > li h4 {
margin: 0px 0px 15px;
}
/* line 60, ../sass/style.scss */
.verticalCarouselGroup.vc_list > li p {
margin: 0px 0px 0px;
}
/*/*!
* jQuery Vertical Carousel
* https://github.com/haripaddu/jQuery-Vertical-Carousel
* Version: 1.0
* License: MIT
*/
/* line 10, ../sass/jQuery.verticalCarousel.scss */
/* line 14, ../sass/jQuery.verticalCarousel.scss */
.vc_goUp, .vc_goDown {
display: block;
}
/* line 16, ../sass/jQuery.verticalCarousel.scss */
.vc_goUp.isDisabled, .vc_goDown.isDisabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
cursor: not-allowed;
}
/* line 21, ../sass/jQuery.verticalCarousel.scss */
.vc_container {
overflow: hidden;
-webkit-transition: height 0.2s ease-in;
transition: height 0.2s ease-in;
}
/* line 25, ../sass/jQuery.verticalCarousel.scss */
.vc_list {
margin: 0;
padding: 0;
list-style: none;
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}
/*!
* 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);
}
}
var nextItem = options.showItems + options.currentItem;
marginTop = $("> :nth-child(" + nextItem + ")", carouselGroup).css("marginTop");
containerHeight = containerHeight - parseInt(marginTop);
$(carouselContainer).css("height", containerHeight);
});
var setOffset = (function(){
var currentItemOffset = $("> :nth-child(" + options.currentItem + ")", carouselGroup).offset();
var carouselGroupOffset = $(carouselGroup).offset();
var offsetDiff = carouselGroupOffset.top - currentItemOffset.top;
$(carouselGroup).css({
"-ms-transform": "translateY(" + offsetDiff + "px)",
"-webkit-transform": "translateY(" + offsetDiff + "px)",
"transform": "translateY(" + offsetDiff + "px)"
})
});
var updateNavigation = (function(direction){
if (options.currentItem == 1){
$(carouselUp).addClass("isDisabled");
}
else if (options.currentItem > 1){
$(carouselUp).removeClass("isDisabled");
}
if(options.currentItem == totalItems || options.currentItem + options.showItems > totalItems){
$(carouselDown).addClass("isDisabled");
}
else if (options.currentItem < totalItems){
$(carouselDown).removeClass("isDisabled");
}
});
var moveCarousel = (function(direction){
if (direction == "up"){
options.currentItem = options.currentItem - 1;
}
if (direction == "down"){
options.currentItem = options.currentItem + 1;
}
updateNavigation();
setContainerHeight();
setOffset();
});
return this.each(function() {
$(this).find("." + carouselGroupClass).wrap('<div class="' + carouselContainerClass + '"></div>');
carouselContainer = $(this).find("." + carouselContainerClass);
carouselGroup = $(this).find("." + carouselGroupClass);
carouselUp = $(this).find("." + carouselGoUpClass);
carouselDown = $(this).find("." + carouselGoDownClass);
totalItems = $(carouselGroup).children().length;
updateNavigation()
setContainerHeight();
setOffset();
$(carouselUp).on("click", function(e){
if (options.currentItem > 1){
moveCarousel("up");
}
e.preventDefault();
});
$(carouselDown).on("click", function(e){
if (options.currentItem + options.showItems <= totalItems){
moveCarousel("down");
}
e.preventDefault();
});
});
};
})(jQuery);
