data-interval by default 5ms.
data-sliet-to:number of slides,
data-wrap:false means stop at last slide,
data-pause:false means pause on mouseover(make data-interval :false)
Bootstrap carousel attributes
| Attribute | Description |
|---|---|
| data-interval | Specifies the time delay in milli-seconds for transitioning from one slide to another. Set this attribute to false if you do not want automatic sliding |
| data-pause | The default value is hover. Pauses from transitioning to the next slide on hover. Set this attribute to false to stop the ability to pause on hover |
| data-wrap | The default value is true which means the carousel transitions thru all the slides without stopping at the last slide. To stop at the last slides set this attribute to false |
| data-ride="carousel" | activates the carousel. The carousel can also be manually activated by using JavaScript $("#carousel_Id").carousel(); |
| data-slide-to | Specifies which slide to go to when clicked. Slide index is ZERO based |
| data-slide | This attribute is added to the carousel controls (LEFT and Right buttons). For the left button the value is "prev" and for the right button the value is "next" |
Bootstrap carousel classes
| Class | Description |
|---|---|
| carousel | Creates a carousel |
| slide | Adds sliding animation effect when transitioning from one item to the other |
| carousel-inner | This class is applied on the element that contains all the slides of the carousel |
| item | Specifies the conent of each slide. Content can be text and images |
| carousel-caption | Specifies a caption for the carousel |
| carousel-indicators | Adds the dot indicators at the bottom of each slide which indicates the current slide the user is viewing and the the total number of slides |
| carousel-control | Adds the left or right bottons on the carousel to go back or forward one slide. To add left button, use left class along with carousel-control class and to add right button use right class along with carousel-control |
No comments:
Post a Comment