Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap carousel vertical sliding

Tags:

Is it possible to implement vertical carousel sliding widh Twitter Bootstrap? In bootstrap.js I find this

  , slide: function (type, next) {   var $active = this.$element.find('.active')     , $next = next || $active[type]()     , isCycling = this.interval     , direction = type == 'next' ? 'left' : 'right'     , fallback  = type == 'next' ? 'first' : 'last'     , that = this 

I tried to change direction to "up" and "down" but sliding not working.

like image 673
Qwadrat Avatar asked Jul 21 '12 05:07

Qwadrat


People also ask

Why is Bootstrap carousel not sliding?

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

How do I set the carousel slide time in bootstrap?

You can simply use the data-interval attribute of the carousel class. It's default value is set to data-interval="3000" i.e 3seconds. All you need to do is set it to your desired requirements. You can also change different slides.

How do I stop Bootstrap carousel Auto Slide?

To turn off the autoplay set data-interval="false" to the carousel element.


1 Answers

Yes.

Below is a hacky way to do it, which does everything by simply overriding the CSS.

If you add a class vertical to your carousel, then adding the following CSS to the page will override the sliding to be vertical:

.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: 100%; }  .carousel.vertical .prev {   top: -100%; }  .carousel.vertical .next.left, .carousel.vertical .prev.right {   top: 0; }  .carousel.vertical .active.left {   top: -100%; }  .carousel.vertical .active.right {   top: 100%; }  .carousel.vertical .item {     left: 0; }​ 

This is basically taking everything in carousel.less and changing left to top.

JSFiddle


This at least indicates what you need to do to get it to slide vertically. However, in practice, one really should add up and down classes to the carousel.less and add a new option to bootstrap-carousel.js to switch between them.

like image 59
merv Avatar answered Nov 04 '22 02:11

merv