Responsive Image Slider in MVC
In this article, we will learn how to implement
responsive image slider in MVC. As
we have seen previously how to implement image slider in asp.net.
Note: Carousels are not supported properly in
Internet Explorer 9 and earlier (because they use CSS3 transitions and
animations to achieve the slide effect).
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Responsive
Image Slider in MVC </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel
slide" data-ride="carousel">
<!-- Indicators
-->
<ol 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>
</ol>
<!-- Wrapper for
slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="~/1
(1).jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Taj
Mahal</h3>
<p>
One knows that ‘The
Taj’ is one amongst the World’s Wonders!
One knows that it
is one amongst the UNESCO World Heritage Sites!!
</p>
</div>
</div>
<div class="item">
<img src="~/1
(2).jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Red
Fort</h3>
<p>The
Red Fort is a historical fort in the city of Delhi in India. It was the main
residence of the emperors of the Mughal dynasty for nearly 200 years, until
1857</p>
</div>
</div>
<div class="item">
<img src="~/1
(3).jpg" wclass="img-responsive">
<div class="carousel-caption">
<h3>Golden
Temple</h3>
<p>The
Golden Temple Amritsar India (Sri Harimandir Sahib Amritsar) is not only a
central religious place of the Sikhs, but also a symbol of human brotherhood and
equality. </p>
</div>
</div>
</div>
<!-- Left and right
controls -->
<a class="left
carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right
carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon
glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Demo:-
Responsive Image Slider in MVC
Reviewed by NEERAJ SRIVASTAVA
on
10:39:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:39:00 AM
Rating:
No comments: