Responsive image slider in asp.net

When we create a website or any application then many times we need to create some animated image slider with content so in this article we create a slideshow or image slider using css in asp.net


Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imagesilder.aspx.cs" Inherits="imagesilder" %>

<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Responsive Image Slider in asp.net </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>

            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">


                <div class="item active">
                    <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"  class="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 asp.net

Responsive image slider in asp.net Responsive image slider in asp.net Reviewed by NEERAJ SRIVASTAVA on 10:14:00 AM Rating: 5

No comments:

Powered by Blogger.