New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/twitter-bootstrap-carousel/
Twitter Bootstrap Carousel
Creating Carousels with Twitter Bootstrap
The carousels popularly known as slide shows are some of the best ways of showcasing huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items. The following example shows you how to build a simple carousel like image rotator using Twitter Bootstrap carousel plug-in:
Example
Try this code »
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet consectetur…</p>
</div>
</div>
<div class="item">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
</div>
</div>
<div class="item">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna vel…</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
— The output of the above example will look something like this:
Activate Carousels via Data Attributes
Twitter Bootstrap enables you to control the position of the carousel easily via data attributes. The data-slide attribute accepts the keywords prev or next, which changes the slide position relative to it’s current position. The data-slide attribute typically applied on the previous and next buttons.
Alternatively, you can use data-slide-to to pass a raw slide index to the carousel slides.
Example
Try this code »
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Carousel indicators -->
<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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet consectetur…</p>
</div>
</div>
<div class="item">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
</div>
</div>
<div class="item">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna vel…</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Activate Carousels via JavaScript
You may also activate a carousel manually using the JavaScript — just call the carousel() method with the "id" or "class" selector of the wrapper element in your JavaScript code.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$("#myCarousel").carousel();
);
</script>
Options
There are certain options which may be passed to carousel() Bootstrap method to customize the functionality of a carousel widget.
Name Type Default Value Description interval number 5000 Specifies the amount of time to delay (in milliseconds) between one slide to another in automatic cycling. If false, carousel will not automatically cycle. pause string “hover” Pauses the cycling of the carousel on mouse enter and resumes the cycling of the carousel on mouse leave. wrap boolean true Specifies whether the carousel should cycle continuously or have hard stops.
Check out the following example to see these options works:
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$("#myCarousel").carousel(
interval : 3000,
pause: false
);
);
</script>
You can also set these options using the data attributes on accordion — just append the option name to data-, like data-interval="3000", data-pause="hover" as demonstrated in the basic implementation.
Methods
These are the standard bootstrap’s carousels methods:
.carousel(options)
This method initializes the carousel with optional options and starts cycling through items.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$("#myCarousel").carousel(
interval : 3000
);
);
</script>
.carousel(‘cycle’)
This method start carousel for cycling through the items from left to right.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$(".start-slide").click(function()
$("#myCarousel").carousel('cycle');
);
);
</script>
.carousel(‘pause’)
This method stops the carousel from cycling through items.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$(".pause-slide").click(function()
$("#myCarousel").carousel('pause');
);
);
</script>
.carousel(number)
This method cycles the carousel to a particular frame (start with 0, similar to an array).
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$(".slide-three").click(function()
$("#myCarousel").carousel(3);
);
);
</script>
.carousel(‘prev’)
This method cycles the carousel to the previous item.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$(".prev-slide").click(function()
$("#myCarousel").carousel('prev');
);
);
</script>
.carousel(‘next’)
This method cycles the carousel to the next item.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$(".next-slide").click(function()
$("#myCarousel").carousel('next');
);
);
</script>
Events
Bootstrap’s carousel class includes few events for hooking into carousel functionality.
Event Description slide.bs.carousel This event fires immediately when the slide instance method is called. slid.bs.carousel This event is fired when the carousel has completed its slide transition.
The following example displays an alert message to the user when sliding transition of a carousel item has been fully completed.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$('#myCarousel').on('slid.bs.carousel', function ()
alert("The sliding transition of previous carousel item has been fully completed.");
);
);
</script>