CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Iatrochemist
Iatrochemist

Reputation: 276

creating carousel using bootstrap

i want to create a carousel using bootstrap, i use the exact code from website but it doesn't rotate the slides and the slide and div position are not right. what changes i should apply to bootstrap code to make it work?enter image description here

 enter code here
<div id="carousel-example-generic" class="carousel slide" data-        ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
 </div>
 ...
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
`enter code here`</div>

Upvotes: 1

Views: 851

Answers (2)

Grovesy
Grovesy

Reputation: 149

where you have ...

you need to include your images via <img> or via <divs> using the background-size cover class. like the following;

<div class="carousel-inner">
            <div class="active item">
                <div style="background:url(/images/1.jpg) center center;
          background-size:cover;" class="slider-size">
  </div>

then add the following CSS:

    .slider-size {
    height: 300px; /* This is your slider height */

    }
    .carousel {
    width:100%; /* changes the width of the carousel on the page */ 
    margin:0 auto; /* center your carousel if other than 100% */ 
}

Upvotes: 1

Akhlesh
Akhlesh

Reputation: 2399

first add bootstrap css, jquery and bootstrap js. then add html code after that initialize the carousel by:- 

$('.carousel').carousel();

http://jsfiddle.net/8LSz4/1/

Upvotes: 1

Related Questions