forum

Home / DeveloperSection / Forums / How to use image gallery Slider in bootstrap

Ask Question

How to use image gallery Slider in bootstrap

Anonymous User 1875 01-Jan-2016
I want to use image gallery Slider in bootstrap .how to use This please give me a demo.
.net bootstrap 
Updated on 03-Jul-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

03-Jul-2023

Sure, here are the steps on how to use image gallery slider in Bootstrap:

  1. Create an image gallery slider in your HTML page.
  2. Add the Bootstrap carousel library to your HTML page.
  3. Write Bootstrap code to control the image gallery slider.
  4. Bind the Bootstrap code to the image gallery slider.

Here is an example of the code:

HTML

<div id="image-gallery-slider">
    <div class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="carousel-item">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <div class="carousel-item">
                <img src="image3.jpg" alt="Image 3">
            </div>
        </div>
        <a class="carousel-control-prev" href="#image-gallery-slider" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#image-gallery-slider" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
    // Get the image gallery slider
    var imageGallerySlider = $("#image-gallery-slider");

    // Initialize the image gallery slider
    imageGallerySlider.carousel();
});
</script>

This code will create an image gallery slider in your HTML page. The Bootstrap carousel library will be loaded from CDN. The Bootstrap code will control the image gallery slider by showing the next and previous images. The Bootstrap code will be bound to the image gallery slider using the ready event handler.

Anonymous User

Anonymous User

01-Jan-2016

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>
answer 415870101042127

Liked By