Multiple jquery slider on .net page
I need help displaying multiple sliders on a single C# page and am having trouble with making the Div id unique and passing that back to my JQuery function. I have embedded my slider within a gridview and ListView.
Can someone please help by telling me what I need to add and change to get that to work? I have been unable to find a good beginner example.
aspx:
<asp:GridView ID="gvPosts" runat="server" AutoGenerateColumns="false"
OnRowDataBound="gvPosts_OnRowDataBound" DataKeyNames="PostID">
<Columns>
<asp:TemplateField HeaderImageUrl="Images" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<div id="slideshow0">
<asp:ListView ID="lvPics" runat="server" AutoGenerateColumns="false" Visible="true" ShowHeader="false">
<LayoutTemplate>
<ul class="bjqs">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<img src='<%# Eval("flImageThumb") %>' alt="no image" width="940" height="450" title='<%# Eval("txtJobName") %>' />
</li>
</ItemTemplate>
</asp:ListView>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Jquery:
jQuery(document).ready(function ($) {
$('#slideshow0').bjqs({
'width': 940,
'height': 450,
'automatic': false,
'showcontrols': true,
'centercontrols': true, // center controls verically
'nexttext': 'Next', // Text for 'next' button (can use HTML)
'prevtext': 'Prev', // Text for 'previous' button (can use HTML)
'showmarkers': true, // Show individual slide markers
'centermarkers': true, // Center markers horizontally
'responsive': true,
'usecaptions': true
});
});
Thank you!