Bootstrap JS Carousel

Clash Royale CLAN TAG#URR8PPP

googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );

Bootstrap JS Carousel

❮ Previous
Next ❯

JS Carousel (carousel.js)

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).

For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.

Note: Carousels are not supported properly in Internet Explorer 9 and
earlier (because they use CSS3 transitions and animations to achieve the slide effect).

<!--

Example

	Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect).

The Carousel Plugin Classes

Class	Description
.carousel	Creates a carousel
.slide	Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect
.carousel-indicators	Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner	Adds slides to the carousel
.icon-next	Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon
.icon-prev	Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon
.item	Specifies the content of each slide
.left carousel-control	Adds a left button to the carousel, which allows the user to go back between the slides
.right carousel-control	Adds a right button to the carousel, which allows the user to go forward between the slides
.carousel-caption	Specifies a caption for the carousel

Via data-* Attributes

The data-ride="carousel" attribute activates the carousel.

The data-slide and data-slide-to attributes specifies which slide to go to.

The data-slide attribute accepts two values: prev or
next, while
data-slide-to accept numbers.

Example

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<li data-target="#myCarousel" data-slide-to="1"></li>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">

Try it Yourself »

googletag.cmd.push(function() googletag.display('div-gpt-ad-1493883843099-0'); );

Via JavaScript

Enable manually with:

Example

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function()
$("#myCarousel").carousel(1);
);

// Enable Carousel Controls
$(".left").click(function()
$("#myCarousel").carousel("prev");
);

Try it Yourself »

Carousel Options

Options can be passed via data attributes or JavaScript. For data attributes,
append the option name to data-, as in data-interval="".

Name	Type	Default	Description	Try it
interval	number, or the boolean false	5000	Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding	Using JS Using data
pause	string, or the boolean false	"hover"	Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover	Using JS Using data
wrap	boolean	true	Specifies whether the carousel should go through all slides continuously, or stop at the last slide true - cycle continuously false - stop at the last item	Using JS Using data

Carousel Methods

The following table lists all available carousel methods.

Method	Description	Try it
.carousel(options)	Activates the carousel with an option. See options above for valid values	Try it
.carousel("cycle")	Goes through the carousel items from left to right	Try it
.carousel("pause")	Stops the carousel from going through items	Try it
.carousel(number)	Goes to a specified item (zero-based: first item is 0, second item is 1, etc..)	Try it
.carousel("prev")	Goes to the previous item	Try it
.carousel("next")	Goes to the next item	Try it

Carousel Events

The following table lists all available carousel events.

Event	Description	Try it
slide.bs.carousel	Occurs when the carousel is about to slide from one item to another	Try it
slid.bs.carousel	Occurs when the carousel has finished sliding from one item to another	Try it

More Examples

Captions to Slides

Add <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide:

Example

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

Try it Yourself »

❮ Previous
Next ❯

搜尋此網誌

wefcdr