Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap image carousel

Suggested Video Tutorials
Part 48 - Bootstrap scrollspy not working
Part 49 - Bootstrap scrollspy vertical menu
Part 50 - Bootstrap affix plugin



In this video we will discuss creating an image carousel using the Bootstrap Carousel plugin



bootstrap image carousel

Bootstrap carousel classes
Class Description
carousel Creates a carousel
slide Adds sliding animation effect when transitioning from one item to the other
carousel-inner This class is applied on the element that contains all the slides of the carousel
item Specifies the conent of each slide. Content can be text and images
carousel-caption Specifies a caption for the carousel
carousel-indicators Adds the dot indicators at the bottom of each slide which indicates the current slide the user is viewing and the the total number of slides
carousel-control Adds the left or right bottons on the carousel to go back or forward one slide. To add left button, use left class along with carousel-control class and to add right button use right class along with carousel-control


Bootstrap carousel attributes
Attribute Description
data-interval Specifies the time delay in milli-seconds for transitioning from one slide to another. Set this attribute to false if you do not want automatic sliding
data-pause The default value is hover. Pauses from transitioning to the next slide on hover. Set this attribute to false to stop the ability to pause on hover
data-wrap The default value is true which means the carousel transitions thru all the slides without stopping at the last slide. To stop at the last slides set this attribute to false
data-ride="carousel" activates the carousel. The carousel can also be manually activated by using JavaScript
$("#carousel_Id").carousel();
data-slide-to Specifies which slide to go to when clicked. Slide index is ZERO based
data-slide This attribute is added to the carousel controls (LEFT and Right buttons). For the left button the value is "prev" and for the right button the value is "next"


Here is the example used in the demo
<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="CustomStyles.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="imageCarousel" class="carousel slide" data-interval="2000"
                     data-ride="carousel" data-pause="hover" data-wrap="true">

                    <ol class="carousel-indicators">
                        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#imageCarousel" data-slide-to="1"></li>
                        <li data-target="#imageCarousel" data-slide-to="2"></li>
                        <li data-target="#imageCarousel" data-slide-to="3"></li>
                    </ol>

                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="Images/Desert.jpg" class="img-responsive">
                            <div class="carousel-caption">
                                <h3>Desert</h3>
                                <p>Desert Image Description</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/Jellyfish.jpg" class="img-responsive">
                            <div class="carousel-caption">
                                <h3>Jellyfish</h3>
                                <p>Jellyfish Image Description</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/Lighthouse.jpg" class="img-responsive">
                            <div class="carousel-caption">
                                <h3>Lighthouse</h3>
                                <p>Lighthouse Image Description</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/Penguins.jpg" class="img-responsive">
                            <div class="carousel-caption">
                                <h3>Penguins</h3>
                                <p>Penguins Image Description</p>
                            </div>
                        </div>
                    </div>

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

            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.