How to use image gallery Slider in bootstrap

Anonymous User 2220 01 Jan 2016

I want to use image gallery Slider in bootstrap .how to use This please give me a demo.

Anonymous User

Other

I am a content writter !

2 Answers

Aryan Kumar 03 Jul 2023

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

Create an image gallery slider in your HTML page.
Add the Bootstrap carousel library to your HTML page.
Write Bootstrap code to control the image gallery slider.
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 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>

forum

How to use image gallery Slider in bootstrap

Can you answer this question?

2 Answers