How to make dynamic slider with caption using aspnet clt Page Language34C34 AutoEventWireup34true34 Codefile34Spdvltrsvwaspxcs34 Inherits34sfty1Spdvltrsvw34 gtltmeta name34viewport34 content34widthdevicewidth initialscale134gtltstylegt boxsizing borderboxbody fontfamily Verdana sansserifmySlides display noneimg verticalalign middle Slideshow container slideshowcontainer maxwidth 1000px po

Create dynamic Slider with Caption in ASP.Net

indradeo

SOLVED CLOSED ACTIVE ANSWERED
User: indradeo
Posted: on May 24, 2024 06:13 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 1139
Sample Code: Download

How to make dynamic slider with caption using asp.net c#

<%@ Page Language="C#" AutoEventWireup="true" Codefile="Spd_vltrs_vw.aspx.cs" Inherits="sfty1.Spd_vltrs_vw" %>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
        text-align: center;
    }

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 100px) {
  .text {font-size: 11px}
}
</style>

<body>
    <form id="form1" runat="server">
<div class="slideshow-container">
    <div class="mySlides fade">
    <div>
    <asp:DataList ID="DataList1" runat="server" HorizontalAlign="Center" RepeatLayout="Table" RepeatDirection="Horizontal" RepeatColumns="1">
        <ItemTemplate>
        <div style="border: 2px solid #ccc;">
             <asp:Image ID="Image1" ImageUrl='<%#Eval("PhotoPath") %>' runat="server" hight='30' Width="200" Visible="true" />
            <br />
            <b>Vehicle Reg. No.:</b>
            <asp:Label ID="Label7" Text='<%# Eval("Vhclrgn") %>' runat="server" />
            <br />
             <b>Speed (km/h):</b>
            <asp:Label ID="Label3" Text='<%#Eval("spd") %>' runat="server" />
            <br />
            <b>Violation Date:</b>
            <asp:Label ID="Label5" Text='<%# Eval("vltrsdt","{0:dd/MM/yyyy}") %>' runat="server" />
            
            <br />
              <b>Camera Location:</b>
            <asp:Label ID="Label6" Text='<%# Eval("lcn") %>' runat="server" />
            <br />
             <b>Dept./Agency:</b>
            <asp:Label ID="Label4" Text='<%# Eval("dptangcy") %>' runat="server" />
            <br />
            <b>Violator:</b>
            <asp:Label ID="Label1" Text='<%# Eval("nm") %>' runat="server" />
            <br />
            </ItemTemplate>
        </asp:DataList>
    </div>  
    </div></div>
    </form>
</body>
</html>

<script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>

Download FREE API for Word, Excel and PDF in ASP.Net

steven

0 5

Reply
ANSWER
User: steven
Replied: on Jun 11, 2024 01:14 PM
Report

Hi indradeo,

Use Repeater control.

Refer below sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        * { box-sizing: border-box; }
        body { font-family: Verdana, sans-serif; }
        img { vertical-align: middle; }
        /* Slideshow container */
        .slideshow-container { max-width: 1000px; position: relative; margin: auto; text-align: center; }
        .active { background-color: #717171; }
        /* Fading animation */
        .fade { animation-name: fade; animation-duration: 1.5s; }

        @keyframes fade {
            from { opacity: .4 }
            to { opacity: 1 }
        }
    </style>
    <script>
        var slideIndex = 0;
        window.onload = function () {
            var slides = document.getElementsByClassName('mySlides');
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[slideIndex].style.display = "block";
            slideIndex++;

            if (slideIndex <= slides.length) {
                setInterval(function () {
                    for (i = 0; i < slides.length; i++) {
                        slides[i].style.display = "none";
                    }
                    slides[slideIndex].style.display = "block";
                    slideIndex++;

                    if (slideIndex == slides.length) {
                        slideIndex = 0;
                    }
                }, 2000);
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="slideshow-container">
            <asp:Repeater ID="rptSilders" runat="server">
                <ItemTemplate>
                    <div class="mySlides fade">
                        <asp:Image ID="Image1" ImageUrl='<%#Eval("PhotoPath") %>' runat="server" hight='30' Width="200" />
                        <br />
                        <b>Vehicle Reg. No.:</b>
                        <asp:Label ID="Label7" Text='<%# Eval("Vhclrgn") %>' runat="server" />
                        <br />
                        <b>Speed (km/h):</b>
                        <asp:Label ID="Label3" Text='<%#Eval("spd") %>' runat="server" />
                        <br />
                        <b>Violation Date:</b>
                        <asp:Label ID="Label5" Text='<%# Eval("vltrsdt","{0:dd/MM/yyyy}") %>' runat="server" />
                        <br />
                        <b>Camera Location:</b>
                        <asp:Label ID="Label6" Text='<%# Eval("lcn") %>' runat="server" />
                        <br />
                        <b>Dept./Agency:</b>
                        <asp:Label ID="Label4" Text='<%# Eval("dptangcy") %>' runat="server" />
                        <br />
                        <b>Violator:</b>
                        <asp:Label ID="Label1" Text='<%# Eval("nm") %>' runat="server" />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindListView();
    }
}

private void BindListView()
{
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.Add("EID");
    dt.Columns.Add("nm");
    dt.Columns.Add("Vhclrgn");
    dt.Columns.Add("spd");
    dt.Columns.Add("dptangcy");
    dt.Columns.Add("vltrsdt", typeof(DateTime));
    dt.Columns.Add("lcn");
    dt.Columns.Add("PhotoPath");
    dt.Rows.Add("1", "Name 1", "123", "100", "200", "2024-06-06", "1", "~/Images/Desert.jpg");
    dt.Rows.Add("2", "Name 2", "123", "100", "200", "2024-06-06", "1", "~/Images/Hydrangeas.jpg");
    dt.Rows.Add("3", "Name 3", "123", "100", "200", "2024-06-06", "1", "~/Images/Jellyfish.jpg");
    rptSilders.DataSource = dt;
    rptSilders.DataBind();
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Create dynamic Slider with Caption in ASP.Net

Company

Explore

Follow us

Contact Us