Home > DeveloperSection > Forums > How to use image gallery Slider in bootstrap
Ankit Singh

Total Post:341

Posted on    January-01-2016 4:11 AM

 .NET Bootstrap 

 1 Reply(s)
 383  View(s)
Rate this:
I want to use image gallery Slider in bootstrap .how to use This please give me a demo.

aditya kumar Patel

Total Post:250

Posted on    January-01-2016 4:21 AM

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">
    <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 Jan-01-2016 06:23:55 AM

Don't want to miss updates? Please click the below button!

Follow MindStick