You must Sign In to post a response.
  • Category: HTML

    Example program for slideshow in html with asp.net

    I want create a webpage for slideshow it contains 10 images those all change dynamically at runtime .how am done it Friends
  • #761689
    Hi

    Slide show of images can be done in many ways using Html, Javascrip. Css or asp.net ajax slide show.

    Below article shows you how to make a slide show of images in asp.net

    http://www.c-sharpcorner.com/uploadfile/anjudidi/making-an-image-slideshow-in-Asp-Net/

    Using asp.net ajax refer below link

    https://demos.devexpress.com/ASPxImageAndDataNavigationDemos/ImageSlider/SlideShow.aspx

    Using Html and Javascrip refer below link

    https://msdn.microsoft.com/en-us/library/hh920769(v=vs.85).aspx

    Regards

    Sridhar Thota.
    If you learn't from defeat..
    You haven't really lost..

    Sridhar Thota.
    Editor: DNS Forum.

  • #761704

    JavaScript or JQuery will help you to maintain slide show of images, with the help of 'setTimeout' method in javascript you can easily put slideShow
    see below snippet

    <script language="JavaScript">
    var i = 0;
    var path = new Array();

    // LIST OF IMAGES
    path[0] = "image_1.gif";
    path[1] = "image_2.gif";
    path[2] = "image_3.gif";

    function swapImage()
    {
    document.slide.src = path[i];
    if(i < path.length - 1) i++; else i = 0;
    setTimeout("swapImage()",3000);
    }
    window.onload=swapImage;
    </script>
    <img height="200" name="slide" src="image_1.gif" width="400" />



    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #761706
    Superb, you r right.But when am click a particular button the only the start slide show.but i want to make slide show on pageload.


    By Paul.S

  • #761710
    You can call your function as follows. If you are using jQuery

    $( document ).ready(function() {
    // Call your function..
    });

    By Nathan
    Direction is important than speed

  • #761716
    Hello Paul,

    Refer the below links for image slide show :

    http://www.aspsnippets.com/Articles/ASPNet-AJAX-SlideShow-Extender-control-Tutorial-with-Example.aspx

    http://code.runnable.com/UhnDqcDBgJNdAAAe/how-to-make-an-image-slider-in-asp-net

    http://www.c-sharpcorner.com/uploadfile/anjudidi/making-an-image-slideshow-in-Asp-Net/

    http://www.aspdotnet-suresh.com/2013/02/create-simple-jquery-image-slideshow.html

    http://www.dotnetbull.com/2011/09/how-to-make-image-slide-show-from.html

    Hope this will help you.

    Regards,
    Nirav Lalan
    DNS Gold Member
    "Failure is the path of least persistence"

  • #761727
    hi
    paul

    Prasad post the code working when the page load means firing this code

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

  • #761769
    #Dotnet Developer-2015, am tried to Prasad's posted query but i did not got exactly output. So could you please correct my query if i did make any mistakes,.
    Below is my query.


    <%@ Page Title="" Language="C#" MasterPageFile="~/User/MasterPageUser.master" AutoEventWireup="true" CodeFile="Reach Us.aspx.cs" Inherits="User_Reach_Us" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
    function swap()
    {
    var i = 0;
    var path = new Array();
    //list of images
    path[0] = "~/Admin/AdminImages/w5.jpg";
    path[1] = "~/Admin/AdminImages/b1.png";
    path[2] = "~/Admin/AdminImages/Admindown.jpg";
    }
    function swapImage() {
    document.slide.src = path[i];
    if (i < path.length - 1) i++; else i = 0;
    setTimeout("swapImage()", 3000);
    }
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
    <asp:Image ID="im0g" runat="server" ImageUrl="~/Admin/AdminImages/w5.jpg" Height="200px" Width="400px" />
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Admin/AdminImages/b1.png" Height="200px" Width="400px" />
    <asp:Image ID="Image2" runat="server" ImageUrl="~/Admin/AdminImages/Admindown.jpg" Height="200px" Width="400px" />

    </div>
    </asp:Content>
    By,
    Paul.S

  • #761772
    Hi
    Paul

    You can follow this code working for me.

    Master Page this


    <form id="form1" runat="server">
    <div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>

    <asp:ContentPlaceHolder ID="head1" runat="server">

    </asp:ContentPlaceHolder>


    <asp:ContentPlaceHolder ID="body1" runat="server">

    </asp:ContentPlaceHolder>
    </div>
    </form>



    Content Page this


    <asp:Content ID="Content1" ContentPlaceHolderID="body1" Runat="Server">
    <script type="text/javascript">
    var i = 0;
    var path = new Array();

    // LIST OF IMAGES
    path[0] = "image_1.jpg";
    path[1] = "image_2.jpg";
    path[2] = "image_3.jpg";

    function swapImage() {
    document.slide.src = path[i];
    if (i < path.length - 1) i++; else i = 0;
    setTimeout("swapImage()", 3000);
    }
    window.onload = swapImage;
    </script>

    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
    <img height="200" name="slide" src="image_1.gif" width="400" />
    <%--<asp:Image ID="im0g" runat="server" ImageUrl="~/Admin/AdminImages/image_1.jpg" Height="200px" Width="400px" />
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Admin/AdminImages/image_2.jpg" Height="200px" Width="400px" />
    <asp:Image ID="Image2" runat="server" ImageUrl="~/Admin/AdminImages/image_3.jpg" Height="200px" Width="400px" />--%>
    </div>
    </asp:Content>


    I have attached Images below check them

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

    Delete Attachment

  • #761773
    Hi
    Paul

    You can try this Below Code this also working


    <script type="text/javascript">
    var i = 0;
    var path = new Array();

    // LIST OF IMAGES
    path[0] = "../Admin/AdminImages/image_1.jpg";
    path[1] = "../Admin/AdminImages/image_2.jpg";
    path[2] = "../Admin/AdminImages/image_3.jpg";

    function swapImage() {
    document.slide.src = path[i];
    if (i < path.length - 1) i++; else i = 0;
    setTimeout("swapImage()", 3000);
    }
    window.onload = swapImage;
    </script>

    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
    <img height="200" name="slide" src="../Admin/AdminImages/image_1.gif" width="400" />
    <%--<asp:Image ID="im0g" runat="server" ImageUrl="~/Admin/AdminImages/image_1.jpg" Height="200px" Width="400px" />
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Admin/AdminImages/image_2.jpg" Height="200px" Width="400px" />
    <asp:Image ID="Image2" runat="server" ImageUrl="~/Admin/AdminImages/image_3.jpg" Height="200px" Width="400px" />--%>
    </div>
    </asp:Content>


    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.


Sign In to post your comments