Mississauga Coding A meetup group

HTML/CSS/JS - Bootstrap Carousel Example

01 Dec 2015

This week we picked another one of the several Bootstrap components - the image slider or carousel - and coded one from scratch.

For your reference and practice, here is the code we had built by the end of the session.

Note that this code assumes we want to loop through five images, each 510px wide by 340px high, and which are stored in a separate folder called images.

###index.html

<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Carousel Example</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

    <div class="container">

        <div class="page-header">
            <h1>Bootstrap Carousel Example</h1>
        </div>

        <div id="mycarousel" class="carousel slide" data-ride="carousel" data-interval="1500">

            <ul 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>
                <li data-target="#mycarousel" data-slide-to="3"></li>
                <li data-target="#mycarousel" data-slide-to="4"></li>
            </ul>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/image1.jpg" alt="">
                    <div class="carousel-caption">
                        <h2>Caption Heading</h2>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </div>
                <div class="item"><img src="images/image2.jpg" alt="">
                    <div class="carousel-caption">
                        <button class="btn btn-lg btn-primary">Learn More</button>
                    </div>
                </div>
                <div class="item"><img src="images/image3.jpg" alt=""></div>
                <div class="item"><img src="images/image4.jpg" alt=""></div>
                <div class="item"><img src="images/image5.jpg" alt=""></div>
            </div>

            <a href="#mycarousel" class="carousel-control left" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#mycarousel" class="carousel-control right" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

        </div>

    </div>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Custom JavaScript -->
    <script src="script.js"></script>

</body>

</html>

###style.css

.carousel {
    height: 420px;
}

.item {
    height: 420px;
    background-color: lightgrey;
}

.item > img {
    margin: 0 auto;
    padding-top: 15px;
}

p {
    padding-bottom:5px;
}

.carousel-indicators li {
    background-color: black;
}

.carousel-indicators .active {
    background-color: cornflowerblue;
}

##References & Resources

Related Posts