ASPxClientImageSlider.ActiveItemChanged Event

Occurs after the active image, displayed within the image area, is changed.

Declaration

ActiveItemChanged: ASPxClientEvent<ASPxClientImageSliderItemEventHandler<ASPxClientImageSlider>>

Event Data

The ActiveItemChanged event's data class is ASPxClientImageSliderItemEventArgs. The following properties provide information specific to this event:

Property	Description
item	Gets an item object related to the event.

Remarks

An image slider’s active item can be changed in a different ways: using the navigation bar, using the keyboard, clicking the image, etc. Additionally, the active item can be changed programmatically by using the ASPxClientImageSlider.SetActiveItem or ASPxClientImageSlider.SetActiveItemIndex methods.

Write the ActiveItemChanged event handler to respond to any active item change. The new active item can be accessed via the ASPxClientImageSliderItemEventArgs.item event argument.

Example

This example demonstrates how to implement custom SlideShow functionality by using the ASPxImageSlider's client-side API.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspximageslider-how-to-use-different-slideshow-timeout-intervals-custom-slideshow-functional-e4913

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxHiddenField;

namespace E4913 {
    public partial class Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void hfCustomIntervals_Init(object sender, EventArgs e) {
            ASPxHiddenField hiddenField = sender as ASPxHiddenField;

            hiddenField["Cherries"] = 2000;
            hiddenField["Raspberry"] = 5000;
            hiddenField["Strawberry"] = 1000;
            hiddenField["Tomatoes"] = 4000;
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="E4913.Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxImageSlider" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var isPlayed = false;
        var timer;

        function GetTimeout(itemName) {
            var defaultTimeout = 1000;
            return hiddenField.Contains(itemName) ? hiddenField.Get(itemName) : defaultTimeout;
        }

        function Play() {
            if (!isPlayed) {
                var item = imageSlider.GetActiveItem(); 

                timer = setTimeout(function () {
                    var nextItemIndex = (item.index + 1) % imageSlider.GetItemCount();
                    imageSlider.SetActiveItemIndex(nextItemIndex);
                }, GetTimeout(item.name));

                isPlayed = true;
            }
        }

        function Pause() {
            if (isPlayed) {
                clearTimeout(timer);
                isPlayed = false;
            }
        }

        function ItemChanged() {
            if (isPlayed) {
                clearTimeout(timer);
                isPlayed = false;
                Play();
            }
        }




        // Handlers

        function imageSlider_Init(s, e) {
            Play();
        }

        function imageSlider_ActiveItemChanged(s, e) {
            ItemChanged();
        }

        function btPlay_Click(s, e) {
            if (isPlayed) {
                Pause();
                s.SetText("Play");
            }
            else {
                Play();
                s.SetText("Pause");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxHiddenField ID="hfCustomIntervals" runat="server" ClientInstanceName="hiddenField"
            OnInit="hfCustomIntervals_Init">
        </dx:ASPxHiddenField>
        <dx:ASPxButton ID="btPlay" runat="server" Text="Pause" AutoPostBack="false">
            <ClientSideEvents Click="btPlay_Click" />
        </dx:ASPxButton>
        <dx:ASPxImageSlider ID="imageSlider" runat="server" ClientInstanceName="imageSlider" Width="600px">
            <ClientSideEvents Init="imageSlider_Init" ActiveItemChanged="imageSlider_ActiveItemChanged" />
            <SettingsImageArea ItemTextVisibility="Always" 
                NavigationButtonVisibility="None" />
            <SettingsNavigationBar Mode="Dots" />
            <Items>
                <dx:ImageSliderItem ImageUrl="~/Images/cherries.jpg" Name="Cherries" Text="Cherries (Timeout: 2 sec)">
                </dx:ImageSliderItem>
                <dx:ImageSliderItem ImageUrl="~/Images/raspberry.jpg" Name="Raspberry" Text="Raspberry (Timeout: 5 sec)">
                </dx:ImageSliderItem>
                <dx:ImageSliderItem ImageUrl="~/Images/strawberry.jpg" Name="Strawberry" Text="Strawberry (Timeout: 1 sec)">
                </dx:ImageSliderItem>
                <dx:ImageSliderItem ImageUrl="~/Images/tomatoes.jpg" Name="Tomatoes" Text="Tomatoes (Timeout: 4 sec)">
                </dx:ImageSliderItem>
            </Items>
        </dx:ASPxImageSlider>
    </div>
    </form>
</body>
</html>

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web.ASPxHiddenField

Namespace E4913
    Partial Public Class [Default]
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        End Sub

        Protected Sub hfCustomIntervals_Init(ByVal sender As Object, ByVal e As EventArgs)
            Dim hiddenField As ASPxHiddenField = TryCast(sender, ASPxHiddenField)

            hiddenField("Cherries") = 2000
            hiddenField("Raspberry") = 5000
            hiddenField("Strawberry") = 1000
            hiddenField("Tomatoes") = 4000
        End Sub
    End Class
End Namespace

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="E4913.Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxImageSlider" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var isPlayed = false;
        var timer;

        function GetTimeout(itemName) {
            var defaultTimeout = 1000;
            return hiddenField.Contains(itemName) ? hiddenField.Get(itemName) : defaultTimeout;
        }

        function Play() {
            if (!isPlayed) {
                var item = imageSlider.GetActiveItem(); 

                timer = setTimeout(function () {
                    var nextItemIndex = (item.index + 1) % imageSlider.GetItemCount();
                    imageSlider.SetActiveItemIndex(nextItemIndex);
                }, GetTimeout(item.name));

                isPlayed = true;
            }
        }

        function Pause() {
            if (isPlayed) {
                clearTimeout(timer);
                isPlayed = false;
            }
        }

        function ItemChanged() {
            if (isPlayed) {
                clearTimeout(timer);
                isPlayed = false;
                Play();
            }
        }




        // Handlers

        function imageSlider_Init(s, e) {
            Play();
        }

        function imageSlider_ActiveItemChanged(s, e) {
            ItemChanged();
        }

        function btPlay_Click(s, e) {
            if (isPlayed) {
                Pause();
                s.SetText("Play");
            }
            else {
                Play();
                s.SetText("Pause");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxHiddenField ID="hfCustomIntervals" runat="server" ClientInstanceName="hiddenField"
            OnInit="hfCustomIntervals_Init">
        </dx:ASPxHiddenField>
        <dx:ASPxButton ID="btPlay" runat="server" Text="Pause" AutoPostBack="false">
            <ClientSideEvents Click="btPlay_Click" />
        </dx:ASPxButton>
        <dx:ASPxImageSlider ID="imageSlider" runat="server" ClientInstanceName="imageSlider" Width="600px">
            <ClientSideEvents Init="imageSlider_Init" ActiveItemChanged="imageSlider_ActiveItemChanged" />
            <SettingsImageArea ItemTextVisibility="Always" 
                NavigationButtonVisibility="None" />
            <SettingsNavigationBar Mode="Dots" />
            <Items>
                <dx:ImageSliderItem ImageUrl="~/Images/cherries.jpg" Name="Cherries" Text="Cherries (Timeout: 2 sec)">
                </dx:ImageSliderItem>
                <dx:ImageSliderItem ImageUrl="~/Images/raspberry.jpg" Name="Raspberry" Text="Raspberry (Timeout: 5 sec)">
                </dx:ImageSliderItem>
                <dx:ImageSliderItem ImageUrl="~/Images/strawberry.jpg" Name="Strawberry" Text="Strawberry (Timeout: 1 sec)">
                </dx:ImageSliderItem>
                <dx:ImageSliderItem ImageUrl="~/Images/tomatoes.jpg" Name="Tomatoes" Text="Tomatoes (Timeout: 4 sec)">
                </dx:ImageSliderItem>
            </Items>
        </dx:ASPxImageSlider>
    </div>
    </form>
</body>
</html>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

ASPxClientImageSlider.ActiveItemChanged Event

Declaration

Event Data

Remarks

Example