Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
-6
rated 0 times [  1] [ 7]  / answers: 1 / hits: 31478  / 9 Years ago, mon, february 16, 2015, 12:00:00

Is there any option in bootstrap carousel to animate it to top to bottom and bottom to top, instead of right to left and left to right.



jsFiddle



<div id=myCarousel class=carousel slide data-ride=carousel data-interval=false>
<!-- Indicators -->
<ol class=carousel-indicators>
<li data-target=#myCarousel data-slide-to=0 class=active></li>
<li data-target=#myCarousel data-slide-to=1 class=></li>
<li data-target=#myCarousel data-slide-to=2 class=></li>
</ol>
<div class=carousel-inner>
<div class=item active>
<div class=container>
<div class=carousel-caption>
<h1>Example headline.</h1>

<p><a class=btn btn-lg btn-primary href=# role=button>Sign up today</a>
</p>
</div>
</div>
</div>
<div class=item>
<div class=container>
<div class=carousel-caption>
<h1>Another example headline.</h1>

<p><a class=btn btn-lg btn-primary href=# role=button>Learn more</a>
</p>
</div>
</div>
</div>
<div class=item>
<div class=container>
<div class=carousel-caption>
<h1>One more for good measure.</h1>

<p><a class=btn btn-lg btn-primary href=# role=button>Browse gallery</a>
</p>
</div>
</div>
</div>
</div> <a class=left carousel-control href=#myCarousel data-slide=prev><span class=glyphicon glyphicon-chevron-left></span></a>
<a class=right carousel-control href=#myCarousel data-slide=next><span class=glyphicon glyphicon-chevron-right></span></a>

</div>

More From » jquery

 Answers
16

You can get change the direction of carousel using this code (The JSFiddle example at the end)




Pay attention to the CSS vertical class selector






CSS: ( the essence of the change of carousel direction )



.vertical .carousel-inner {
height: 100%;
}

.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
top: 0;
}

.carousel.vertical .next {
top: 400px;
}

.carousel.vertical .prev {
top: -400px;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}

.carousel.vertical .active.left {
top: -400px;
}

.carousel.vertical .active.right {
top: 400px;
}

.carousel.vertical .item {
left: 0;
}



Javascript:



$('.carousel').carousel({
interval: 3000
})



HTML:



<div class=container>
<div class=row-fluid>
<div class=span6 offset3>
<div id=myCarousel class=carousel slide vertical>
<!-- Carousel items -->
<div class=carousel-inner>
<div class=active item>
<img src=http://placehold.it/600x400&amp;text=First+Slide>
</div>
<div class=item>
<img src=http://placehold.it/600x400&amp;text=Second+Slide>
</div>
<div class=item>
<img src=http://placehold.it/600x400&amp;text=Third+Slide>
</div>
</div>
<!-- Carousel nav -->
<a class=carousel-control left href=#myCarousel data-slide=prev>‹</a>
<a class=carousel-control right href=#myCarousel data-slide=next>›</a>
</div>
</div>
</div>
</div>



You can see it in action here: http://jsfiddle.net/wram2h2p/


[#67810] Friday, February 13, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;