Bootstrap

champak
Bootstrap
₹2,000.00 ₹300.00
  • 23 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

Bootstrap Carousel-1

A Carousel is a Slide Show that cycles between elements. Creating a carousel is very easy in Bootstrap.

You begin by creating a div with the following specifications.


<div id="varanasicarousel" class="carousel slide" data-ride="carousel">

The carousel content is specified by the following code.


<div class="carousel-inner">

The code so far

</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.carouselimage
{
width:1100px;
height:500px;

}
</style>
</head>
<body>
<div class="container">
<div id="varanasicarousel" class="carousel slide" data-ride="carousel">

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/0.jpg" alt="Ramnagar Kila" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/1.jpg" alt="Ganga" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/2.jpg" alt="Ganga" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/3.jpg" alt="Ganga" class="carouselimage">
</div>
</div>

</div>
</div>
</body>
</html>
<pre>

 

To add Indicators add the following code.

The code now


<!-- Indicators -->

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

The complete code so far.

</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.carouselimage
{
width:1100px;
height:500px;

}
</style>
</head>
<body>
<div class="container">
<div id="varanasicarousel" class="carousel slide" data-ride="carousel">

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/0.jpg" alt="Ramnagar Kila" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/1.jpg" alt="Ganga" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/2.jpg" alt="Ganga" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/3.jpg" alt="Ganga" class="carouselimage">
</div>
</div>
<!-- Indicators -->

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

</div>
</div>
</body>
</html>
<pre>

 

To add left and right controls.


<!-- Left and right controls -->
<a class="carousel-control-prev" href="#varanasicarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#varanasicarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

The complete code now.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.carouselimage
{
width:1100px;
height:500px;

}
</style>
</head>
<body>
<div class="container">
<div id="varanasicarousel" class="carousel slide" data-ride="carousel">

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/0.jpg" alt="Ramnagar Kila" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/1.jpg" alt="Ganga" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/2.jpg" alt="Ganga" class="carouselimage">
</div>
<div class="carousel-item">
<img src="img/3.jpg" alt="Ganga" class="carouselimage">
</div>
</div>
<!-- Indicators -->

<ul class="carousel-indicators">
<li data-target="#varanasicarousel" data-slide-to="0" class="active"></li>
<li data-target="#varanasicarousel" data-slide-to="1"></li>
<li data-target="#varanasicarousel" data-slide-to="2"></li>
<li data-target="#varanasicarousel" data-slide-to="3"></li>
</ul>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#varanasicarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#varanasicarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

</div>
</div>
</body>
</html>

To add captions you can use the following code just below the image in carousel-item


<div class="carousel-caption">
<h3>Ganga</h3>
<p>Great Place</p>
</div>

 

The complete code will be.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.carouselimage
{
width:1100px;
height:500px;

}
</style>
</head>
<body>
<div class="container">
<div id="varanasicarousel" class="carousel slide" data-ride="carousel">

<!-- The slideshow -->
<div class="carousel-inner slide">
<div class="carousel-item active ">
<img src="img/0.jpg" alt="Ramnagar Kila" class="">
<div class="carousel-caption">
<h3 class="bg-primary">Ramnagar Kila</h3>
<p>Great Place</p>
</div>
</div>
<div class="carousel-item">
<img src="img/1.jpg" alt="Ganga" class="">
<div class="carousel-caption">
<h3 class="bg-primary">Ganga</h3>
<p>Great Place</p>
</div>
</div>
<div class="carousel-item">
<img src="img/2.jpg" alt="Ganga" class="">
<div class="carousel-caption">
<h3>Ganga</h3>
<p>Great Place</p>
</div>
</div>
<div class="carousel-item">
<img src="img/3.jpg" alt="Ganga" class="">
<div class="carousel-caption">
<h3>Ganga</h3>
<p>Great Place</p>
</div>
</div>
</div>
<!-- Indicators -->

<ul class="carousel-indicators">
<li data-target="#varanasicarousel" data-slide-to="0" class="active"></li>
<li data-target="#varanasicarousel" data-slide-to="1"></li>
<li data-target="#varanasicarousel" data-slide-to="2"></li>
<li data-target="#varanasicarousel" data-slide-to="3"></li>
</ul>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#varanasicarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#varanasicarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

</div>
</div>
</body>
</html>

Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon Used together with .carousel-control-prev to create a “previous” button
.carousel-control-next-icon Used together with .carousel-control-next to create a “next” button
.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

 

Final Code


<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="" />
<meta name="description" content="Meta Description for your Page.">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>


.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
/* Hide Overflow */
body {
overflow-x: hidden;
}
/* Card Alignment */
</style>

</head>
<body>

<div class="row">
<div class="col-md-12">
<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active card">
<img class="d-block img-fluid" src="bheemchandimandir.jpg" alt="Slide1" width="100%">
<div class="carousel-caption d-none d-md-block text-primary bg-light rounded">
<h3 style='font-size:3em; text-shadow:3px 3px 5px black'>Bheem Chandi Mandir</h3>
<p>Main Mandir</p>
</div>
</div>
<div class="carousel-item card">
<img class="d-block img-fluid " src="bheemchandipeepal.jpg" alt="Slide2" width="100%">
<div class="carousel-caption d-none d-md-block text-primary bg-light rounded">
<h3 style='font-size:3em; text-shadow:3px 3px 5px black'>Bheem Chandi Peepal</h3>
<p>Peepal</p>
</div>
</div>
<div class="carousel-item card">
<img class="d-block img-fluid" src="bheemchandisarovar.jpg" alt="Slide3" width="100%">
<div class="carousel-caption d-none d-md-block text-primary bg-light rounded">
<h3 style='font-size:3em; text-shadow:3px 3px 5px black'>Bheem Chandi Sarovar</h3>
<p>Sarovar</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- *************Carousel***************-->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

 

 

 

end

One thought on “Bootstrap Carousel-1

Leave a Reply

Your email address will not be published. Required fields are marked *