"jQuery Vertical Carousel"
Bootstrap 3.0.0 Snippet by foysal991

<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);

Related: See More


Questions / Comments: