Multiview not changing view

Question

using multiview i want to make a simple image slider. for which i used five view and three button (play, pause, stop). but when i click on play button then using loop i am changing the view but it is not working. here is the code .

 <table style="vertical-align:center">
            <tr>
                <td colspan="3">
                    <asp:MultiView ID="multiview1" runat="server" ActiveViewIndex="0">
                        <asp:View ID="View1" runat="server">
                            <asp:Image ID="Image1" ImageUrl="~/ABA0038_1.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <asp:Image ID="Image2" ImageUrl="~/Baraca.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View3" runat="server">
                            <asp:Image ID="Image3" ImageUrl="~/bdmbat.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View4" runat="server">
                            <asp:Image ID="Image4" ImageUrl="~/cricket helmet.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                        <asp:View ID="View5" runat="server">
                            <asp:Image ID="Image5" ImageUrl="~/nike-football.jpg" runat="server" Height="250px" Width="250" />
                        </asp:View>
                    </asp:MultiView>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnPlay" runat="server" Text="Play" OnClick="btnPlay_Click" />
                </td>
                 <td>
                    <asp:Button ID="btnPause" runat="server" Text="Pause" OnClick="btnPause_Click" />
                </td>
                 <td>
                    <asp:Button ID="btnStop" runat="server" Text="Stop" OnClick="btnStop_Click" />
                </td>
            </tr>
        </table>

on play button clik

protected void btnPlay_Click(object sender, EventArgs e)
    {
        for(int i=0;i<4;i++)
        {

            multiview1.ActiveViewIndex = multiview1.ActiveViewIndex + 1;

            System.Threading.Thread.Sleep(4000);

        }
    }

Answer 1

This is an example slider code as you requested. I used Nivo Slider plugin here.

There are many plugins can be downloaded here In your Slider.aspx

Step1: Download the zip file and extract and add the content in your aspx project folder \content

<link rel="stylesheet" href="content/nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
        type="text/javascript"></script>
<script src="content/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Step 2: Create the Html Markup for your slider

Assuming you have the proper images in your \images folder and can be replaced here

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Step 3: Configure the slider

<script type="text/javascript">
  $(document).ready(function() {
    $('#slider').nivoSlider();
  });
</script>

Step 4: Check my comment in the question..

Answer 2

Kindly take my solution for just learning purpose.

1. Having a play button will not help since the page will display once a loop has finished executing.
2. But we can implement prev and Next buttons for the sake of learning the beauty and dynamics of views

Here is my simple code i wrote to implement Prev and Next to cater for image change

Galary.aspx

    <div class="panel panel-primary col-md-4 col-md-offset-4 modal-content" style="padding:0px; margin-top:30px;">
    <div class="panel-heading">
        Image Slider
    </div>
    <div class="panel-body">
        <asp:MultiView runat="server" ID="MultiView1"> 
            <asp:View runat="server" ID="View1">
                <img src="Images/home.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
             <asp:View runat="server" ID="View2">
                <img src="Images/1.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
             <asp:View runat="server" ID="View3">
                <img src="Images/2.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
             <asp:View runat="server" ID="View4">
                <img src="Images/3.jpg" alt="Home" style="max-width:100%; max-height:100%;"/>
            </asp:View>
        </asp:MultiView>
    </div>
    <div class="panel-footer">
        <asp:Button runat="server" CssClass="btn btn-primary" Text="Prev" OnClick="btn_clickPrev" />
        <%--<asp:Button runat="server" CssClass="btn btn-danger" Text="Play" />--%>
        <asp:Button runat="server" CssClass="btn btn-primary pull-right" Text="Next" OnClick="btn_clickNext" />
    </div>
</div>

Galary.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack){
            ImageSlider(0);
        }
    }


    public void ImageSlider(int i) {
        MultiView1.ActiveViewIndex = i;
    }

    protected void btn_clickNext(object sender, EventArgs e)
    {
        if ((MultiView1.ActiveViewIndex + 1)<4)
        {
         ImageSlider(MultiView1.ActiveViewIndex+1);
        }
        else
        {
            ImageSlider(MultiView1.ActiveViewIndex);
        }
    }

    protected void btn_clickPrev(object sender, EventArgs e)
    {
        if ((MultiView1.ActiveViewIndex - 1)>=0)
        {
            ImageSlider(MultiView1.ActiveViewIndex-1);
        }
        else
        {
            ImageSlider(MultiView1.ActiveViewIndex);
        }
    }
}

How it looks

Note

This is not the best way to implement image sliders due to the fact that it keeps loading the page while changing images. But for the sake of learning more about views, that is how best you can implement it.