Bootstrap 3.0 - Carousel or Slider Example - RWD

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
            data-toggle="collapse" 
            data-target=".navbar-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>

            </button> <a href="#" class="navbar-brand">
                Skates R Us
            </a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="contact.html">Contact / About</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="new.html">New Products</a></li>
                <li><a href="media.html">Media</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    
    <!-- Items -->
    <div class="carousel-inner">
        
        <div class="item active">
            <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
        </div>
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
        </div>
        <div class="item">
           ...

CSS

.carousel {
    height: 500px;
    margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
 .carousel-caption {
    z-index: 10;
}
/* Declare heights because of positioning of img element */
 .carousel .item {
    width: 100%;
    height: 500px;
    background-color: #777;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}
@media (min-width: 768px) {
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }
}
img {
    background: red;
}

JavaScript

$("#carousel").carousel();