https://github.com/anupamkhosla/bootstrap-carousel-speed

Customized bootstrap carousel.js plugin to have custom transition speed for slides.
https://github.com/anupamkhosla/bootstrap-carousel-speed

Last synced: 13 days ago
JSON representation

Customized bootstrap carousel.js plugin to have custom transition speed for slides.

• Host: GitHub
• URL: https://github.com/anupamkhosla/bootstrap-carousel-speed
• Owner: AnupamKhosla
• Created: 2017-02-11T16:28:26.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-13T14:35:48.000Z (almost 8 years ago)
• Last Synced: 2024-11-02T17:05:23.125Z (13 days ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# bootstrap-carousel-speed

Customized bootstrap 3.3.7 carousel.js plugin to have user defined transition speed of slides.

## About

As asked in many stackoverflow posts like http://stackoverflow.com/q/17332431/3429430 and http://stackoverflow.com/q/20840018/3429430 bootstrap 3.3.7 carousel cannot have different sliding speed only with css. The carousel.js file is also needed to be modified. With this plugin you can initialize bootstrap carousel in your js with custom user defined sliding speed. This is different from the interval option.

## Install with Bower

`bower install bootstrap-carousel-speed`

## How to Initialize

In your css put: 

```

@media all and (transform-3d), (-webkit-transform-3d) {   

    .carousel-inner > .item {    	

        transition: transform 1500 ease-in-out;

    }    

}

```

In your main js initialize bootstrap carousel with

```

$('#bslider').carousel({

  TRANSITION_DURATION: 1500 // This is my custom bootstrao property that sets each transitions time

})

```

Note1: Transition duration must be same in both css and js.

Note2: transition.js is a dependency of carousel.js, hence has been included within.