Latest web development tutorials

Bootstrap carousel

description

In this tutorial, you'll see how to create Bootstrap carousel. This will help you to create content slider, image galleries, and so on.


usage 

<div id="myCarousel" class="carousel slide">
	<!-- Carousel items -->
	<div class="carousel-inner">
		<div class="active item">…</div>
		<div class="item">…</div>
		<div class="item">…</div>
	</div>
	<!-- Carousel nav -->
	<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
	<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

So, you want to show the entry (such as images) in a cyclic order placed in the "carousel-inner" div by "<-! Carousel nav ->" Create navigation entry. It uses a custom data attribute "data-slide" to navigate to the previous and next entry.

You must reference jquery.js and bootstrap-carousel.js file you want to create an HTML file rotation.

Bootstrap Carousel examples

Examples

<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap page with next and previous instances of </ title>
<Meta name = "description" content = "Twitter Bootstrap pager with next and previous example">
<Link href = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
body {
margin: 50px;
}
</ Style>
</ Head>
<Body>
<Ul class = "pager">
<Li>
<a href="#"> Previous </a>
</ Li>
<Li>
<a href="#"> Next </a>
</ Li>
</ Ul>
</ Body>
</ Html>

View online examples

Examples of old and new with a flip of

Examples

<Div class = "navbar navbar-fixed-top">
<Div class = "navbar-inner">
<Div class = "container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</a>
<a class="brand" href="#"> <img src = "/ images / w3r.png" width = "111" height = "30" alt = "w3resource logo" /> </a>
<Div class = "nav-collapse">
<Ul class = "nav">
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="#about"> About </a> </ li>
<Li> <a href="#contact"> Contact </a> </ li>
</ Ul>
</ Div> <-!. / Nav-collapse ->
</ Div>
</ Div>
</ Div>

<Div class = "container">
<-! Example row of columns ->
<Div class = "row">
<Div class = "span4">
<H2> HTML5 and JS Apps </ h2>
<P> </ p>
<Div id = "myCarousel" class = "carousel slide">
<-! Carousel items ->
<Div class = "carousel-inner">
<Div class = "active item"> <img src = "../ update-images / html5_logo.png" alt = "HTML5 logo" width = "500" height = "99" /> </ div>
<Div class = "item"> <img src = "../ update-images / javascript-logo.png" alt = "JS logo" width = "500" height = "99" /> </ div>
<Div class = "item"> <img src = "../ update-images / schema.png" alt = "Schema.org logo" width = "500" height = "99" /> </ div>
<Div class = "item"> <img src = "../ update-images / json.gif" alt = "JSON logo" width = "500" height = "99" /> </ div>
</ Div>
<-! Carousel nav ->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"> << / a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">> </a>
</ Div>
</ Div>
</ Div>

<Hr>

<Footer>
<P> © Company 2012 </ p>
</ Footer>

</ Div> <-! / Container ->

<-! Le javascript
================================================== ->
<! - Placed in the bottom of the document pages load faster ->
<Script src = "twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "twitter-bootstrap-v2 / docs / assets / js / bootstrap-carousel.js"> </ script>

View online examples

Use Javascript

You can use the following JavaScript code to create rotation. 

$ ( '. Carousel'). Carousel ()

The following are options you can use

  • interval: the provisions of the slide rotation wait time, in milliseconds. Value is of type number, the default value is 5000. If the broadcast is false, the wheel will not automatically start the cycle.
  • pause: When the mouse hovers over a predetermined area of ​​the slide that is suspended rotation, left mouse starts rotation. Value is of type string, the default value is 'hover'.

Here is the rotation method that you can use

  • .carousel (options): Initialization carousel assembly to accept an optional parameter object type options, and start the slide cycle. 
    • $ ( '. Carousel'). Carousel ({
  interval: 2000 // in milliseconds
})
  • .carousel ( 'cycle'): from left to right cycle for each frame. 
    • . $ ( '. Carousel') carousel ( 'cycle');
  • .carousel ( 'pause'): stop the rotation. 
    • $ ( '# MyCarousel'). Hover (function () { 
  $ (This) .carousel ( 'pause') 
}
  • .carousel (number): The rotation positioned on the specified frame (frame subscript starts at 0, array-like). 
    • $ ( "# Carousel_nav"). Click (function () { 
var item = 4; 
$ ( '# Home_carousel') carousel (item).; 
return false; 
});
  • .carousel ( 'prev'): Go to the rotation on one.
  • .carousel ( 'next'): the carousel to the next frame.

There are two events to enhance the function of rotation.

  • slide: When the slide instance method is called, this event is triggered immediately.
  • slid: When all finished slideshow, this event is triggered.

Click here to download the tutorial to use all the HTML, CSS, JS and image files.