JQuery UI Slider

by Laurie

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item">
            <img src="http://www.vikingrivercruises.com/Images/Main-river-hero-686x262_tcm43-8540.gif">
            <div class="carousel-caption">
                
<h4>Welcome to Wintria</h4>

                <p>We can show various sections of the website in each slide</p>
            </div>
        </div>
        <div class="item">
            <img src="http://musicunderfire.com/wp-content/uploads/2011/08/Bon-Iver-Holocene.jpg">
            <div class="carousel-caption">
                
<h4>Wintria's New Sources</h4>

                <p>Show various news sources available</p>
            </div>
        </div>
        <div class="item">
            <img src="http://static.collider.com.au/assets/images/boniver_holocene/ne_boniver-holocene_02.jpg">
            <div class="carousel-caption">
                
<h4>It's all free</h4>

                <p>Accounts are free and always will be</p>
            </div>
        </div>
    </div>
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

CSS

.center {
    text-align: center;
}
img {
    width: 100%;
    height:350px;
}

JavaScript

$('.carousel').carousel({
        interval: 3500
    })