How to show 4 photo on slider?

Question

I would like to show 4 photo on all each slider but i can get only 1 photo

Is there any different way to show 4 photos side by side on slider?

 <div class='slider'>
                        <ul class='slides'>
                                <asp:Repeater ID="rpShowcaseAlbum" runat="server">
                                    <ItemTemplate>
                               <li>
                                <!-- Showcase Album -->
                                <div class='span12'>
                                        <a href="album_detay.aspx?ArtistID=<%#Eval("ArtistID") %>">
                                            <div class="photo_frame">
                                                <img src='Admin/uploads/photo/<%#Eval("Photo") %>' style="max-width: 250px; max-height: 250px;" alt='' />
                                                <div class='text'>
                                                    <span class='artist'><%#Eval("ArtistName") %></span>
                                                </div>
                                            </div>
                                        </a>
                                </div>
                            </li>
                            </ItemTemplate>
                            </asp:Repeater>
                       </ul>
                    </div>


  if (Dt.Rows.Count > 0)
        {
            rpShowcaseAlbum.DataSource = Dt;
            rpShowcaseAlbum.DataBind();
        }

In Wpf, I usually put all on a `stack` or like a `panel`, which make it very easy — Khalil Khalaf, Apr 29 '16 at 12:33

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

Your problem is that you are creating wrapping li and div for each item in the slider. You can use item index to render these li and div only when needed:

<%# Container.ItemIndex % 4 == 0 ? "<li><div class='span12'>" : "" %>

    <a href="album_detay.aspx?ArtistID=<%#Eval("ArtistID") %>">
        <div class="photo_frame">
            <img src='Admin/uploads/photo/<%#Eval("Photo") %>' style="max-width: 250px; max-height: 250px;" alt='' />
            <div class='text'>
                <span class='artist'><%#Eval("ArtistName") %></span>
            </div>
        </div>
    </a>

<%# Container.ItemIndex % 4 == 3 ? "</div></li>" : "" %>

This is a bit of a trick, and is done because of the fact that Container is actually available in data binding context only.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 29 '16 at 12:34

Andrei

55,890
9
87
108

i got error: `The name 'Container' does not exist in the current context` – Shqiptar Apr 29 '16 at 12:44
@Shqiptar, yeah, sorry, just realized Container is actually available in data binding context only. Updated with a bit trickier way – Andrei Apr 29 '16 at 12:54

How to show 4 photo on slider?

1 Answers1