HOW TO USE IMAGE GALLERY SLIDER IN BOOTSTRAP

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 805  View(s)
Ratings:
Rate this:
I want to use image gallery Slider in bootstrap .how to use This please give me a demo.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use image gallery Slider in bootstrap

    When you want to use image gallery Slider in bootstrap first you download and add  bootstrap css and JavaScript in your project. after you add reference  in your html page. you can see below write some code.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image Gallary.aspx.cs" Inherits="Forumasp.Image_Gallary" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-2.1.4.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="container">
        <div id="Silder" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#Silder" data-slide-to="0" class="active"></li>
        <li data-target="#Silder" data-slide-to="1"></li>
        <li data-target="#Silder" data-slide-to="2"></li>
        <li data-target="#Silder" data-slide-to="3"></li>
      </ol>
    
      <!-- Image for slides -->
      <div class="carousel-inner" >
        <div class="item active">
          <img src="Images/1.jpeg" >
        </div>
          
        <div class="item">
          <img src="Images/1.jpeg" >
        </div>
    
        <div class="item">
         <img src="Images/1.jpeg" >
        </div> 
      </div>
    
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#Silder" 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="#Silder" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
                </div>
        </div>
        </form>
    </body>
    </html>
    

      Modified On Jan-01-2016 06:23:55 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!