How to add slider in bootstrap carousel
Microsoft Net Framework

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <style>
        .classforpadding {
            padding-left: 300px;
        }
    </style>
</head>
<body>
    <nav class="nav navbar-default">
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav classforpadding">

                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">History<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">1.1 </a></li>

                    </ul>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">1</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">1.1</a> </li>

                            </ul>
                        </li>

                        <li><a href="#">2</a></li>
                    </ul>

 

                <li class="active"><a href="#">Contact</a></li>
            </ul>

            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Key Word" />
                </div>
                <button type="button" class="btn btn-danger">Submit</button>
            </form>

        </div>
    </nav>

    <div>

    </div>

    <div class="container">
        <h1>Slider Show</h1>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" class="active"></li>
                <li data-target="#myCarousel" ></li>
                <li data-target="#myCarousel" ></li>
            </ol>
            <div class="carousel-inner" style="height:500px">
                <div class="item active">
                    <img src="images/chicago.jpg" />

                </div>
                <div class="item">

                    <img src="images/la.jpg" />

                </div>
                <div class="item">

                    <img src="images/ny.jpg" />

                </div>

            </div>

            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>


        </div>

 

    </div>

    <footer class="panel-footer pull-right">
        <p>copyrights &copy; All right reserved</p>
    </footer>

</body>
</html>

Share This with your friend by choosing any social account


Upcoming Articles
Copyright Future Minutes © 2015- 2024 All Rights Reserved.   Terms of Service  |   Privacy Policy |  Contact US|  Pages|  Whats new?
Update on: Dec 20 2023 05:10 PM