How to use image gallery Slider in bootstrap

Posted by  Ankit Singh
 1497  View(s)
Rate this:
I want to use image gallery Slider in bootstrap .how to use This please give me a demo.
  1. 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="">
    <head runat="server">
        <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>
        <form id="form1" runat="server">
            <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>
      <!-- Image for slides -->
      <div class="carousel-inner" >
        <div class="item active">
          <img src="Images/1.jpeg" >
        <div class="item">
          <img src="Images/1.jpeg" >
        <div class="item">
         <img src="Images/1.jpeg" >
      <!-- 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 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>

      Modified On Apr-10-2018 06:55:06 AM