waynejames waynejames - 1 month ago 9
CSS Question

Angular Bootstrap Text Carousel Vertical Scroll

I have an Angular Bootstrap Text Carousel, which works fine. I'm trying to use the same code but for a News Ticker with vertical scroll instead. Looking at the JSFiddle is there a "simple" way to do this? I've searched for and tried some answers on here already but no success.

This is part of the working HTML & JS for what I have at the minute:

<div ng-app="textCarousel" class="row">
<!-- CAROUSEL -->
<div id="group-news-carousel">
<div ng-controller="groupNewsController" id="text-carousel">
<h2>Group News</h2>
<carousel interval="interval">
<slide ng-repeat="slide in slides" active="slide.active">
{{slide.text}}
</slide>
</carousel>
</div>
</div>
</div>

angular.module('textCarousel', ['ui.bootstrap']);
function deptNewsController($scope) {
$scope.interval = 8000;
$scope.slides = [
{
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor gravida egestas. Vestibulum quis metus nulla. Mauris diam nulla, sodales nec malesuada quis, fermentum egestas sem.'
},
{
text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.'
},
{
text: 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.'
}
];
};


JSFiddle
Be sure to check the external resources if you can, I know it's a bit extensive but any help is appreciated!

Thanks

Answer

Make the following changes in the css. For the bottom to top scroll:

.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out top;
  -o-transition: 0.6s ease-in-out top;
  transition: 0.6s ease-in-out top;
  margin-top: 120px;
}

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  top: 0;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  top: 0;
}

For the verticle navigation:

.carousel-indicators {
    position: absolute;
    bottom: 25px;
    right: 10%;
    z-index: 15;
    width: 10%;
    height:60%;
    margin: 0 -30%;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

I think you should be good to go. Hope this helps.