Online: 23013
Online: 23013
Online: 23013
Bootstrap uses carousel to slide the text and image
<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>
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 carouselcarousel-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 statecarousel-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 valuesitem to define the slide 2 value with given textitem to define the slide3 value with given text<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 #DemoCarouselWe have style tag to define the styles of the given values for item and h2 .
output
