Bootstrap > Carousel

Sliding text / carousel in Bootstrap

How to slide the text using carousel in Bootstrap


Carousel

Bootstrap uses carousel to slide the text and image 

Sliding-text

 <style>
        .item {
            background: #333;
            text-align: center;
            height: 300px;
        }
        h2 {
            margin: 0;
            color: #888;
            padding-top: 80px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="thumbnail">
        <div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
            
            <ol class="carousel-indicators">
                <li data-target="#DemoCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#DemoCarousel" data-slide-to="1"></li>
                <li data-target="#DemoCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <h2>Slide 1</h2>
                    <div class="carousel-caption">
                        <h3>This is the First Label</h3>
                        <p>The Content of the First Slide goes in here</p>
                    </div>
                </div>
                <div class="item">
                    <h2>Slide 2</h2>
                    <div class="carousel-caption">
                        <h3>This is the Second Label</h3>
                        <p>The Content of the second Slide goes in here</p>
                    </div>
                </div>
                <div class="item">
                    <h2>Slide 3</h2>
                    <div class="carousel-caption">
                        <h3>This is the Third Label</h3>
                        <p>The Content of the Third Slide goes in here</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control left" href="#DemoCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#DemoCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
  • In the above code snippet we have defined the carousel sliding the text, we have value of   class attribute as thumbnail in div  and in that div we have another div with id as DemoCarousel using class attribute value as  carousel slide and data-interval=2000 which is used to delay the time interval between the item and data-ride as carousel
  • In the next line we are having the ordered list with class attribute value carousel-indicator, in the ol elements , we are having the data-target as #DemoCarousel and data-slide as 0, 1 and 2 in the li elements  and data-slide (0)in active state
  • In the next line we have  class attribute value carousel-inner in the div and we have given the another div with class attribute value item-active to define the value as Slide 1 in <h2> and div  with class attribute value carousel-caption to define the values
  • In the next line we defined the another div with class attribute value item  to define the slide 2 value with given text
  • In the next line we are having the another div with class attribute valueitem  to define the slide3 value with given text
  • In the nextline we are having the <a> tag to define the carousel-left and carousel-right using symbols with glyphicon-chevron-left and glyphicon-chevron-right with data-slide as previous and next and href as #DemoCarousel
  • We have style tag to define the styles of the given values for item and h2 .

output 

 Views: 53760 | Post Order: 43



Write for us






Hosting Recommendations