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.
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.).
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.
To turn off the autoplay set data-interval="false" to the carousel element.
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
.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With