c# - Multiple bootstrap sliders using asp:repeater control -
i have use multiple bootstrap carousel in single page, using asp repeater control doesn't work, show 1 slider on page
here html , asp code
<div class="col-md-12"> <div id="carousel" class="carousel slide"> <!-- carousel items --> <div class="carousel-inner"> <div class="item"> <div class="row"> <asp:repeater runat="server" id="slider1"> <itemtemplate> <div class="col-md-2"> <div class="row"> <a target="_blank" href="<%# eval("url") %>"> <img class="caption" src="../includes/gaceta/<%# eval("titulo") %>/files/res/pages/page_0000.jpg" alt="<%# eval("titulo") %>" width="188" height="222" /></a> </div> </div> </itemtemplate> </asp:repeater> </div> <!--.row--> </div> </div> <!--.carousel-inner--> <a data-slide="prev" href="#carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel" class="right carousel-control">›</a> </div> <!--.carousel--> </div> <hr /> <div class="col-md-12"> <div id="carousel2" class="carousel slide"> <!-- carousel items --> <div class="carousel-inner"> <div class="item"> <div class="row"> <asp:repeater runat="server" id="slider2"> <itemtemplate> <div class="col-md-2"> <div class="row"> <a target="_blank" href="<%# eval("url") %>"> <img class="caption" src="../includes/gaceta/<%# eval("titulo") %>/files/res/pages/page_0000.jpg" alt="<%# eval("titulo") %>" width="188" height="222" /></a> </div> </div> </itemtemplate> </asp:repeater> </div> <!--.row--> </div> </div> <!--.carousel-inner--> <a data-slide="prev" href="#folletos" class="left carousel-control">‹</a> <a data-slide="next" href="#folletos" class="right carousel-control">›</a> </div> <!--.carousel--> the javascript
$(document).ready(function () { $('#carousel').carousel('pause'); $('#carousel2').carousel('pause'); $("div.item:first").addclass("active"); }); and methods bind repeater
protected void page_load(object sender, eventargs e) { bindslider1(5); bindslider2(1); } protected void bindslider1(int ubicacion) { using (sqlconnection con = conexion.conecta()) { using (sqlcommand cmd = new sqlcommand("selgacetaubicacion", con)) { cmd.commandtype = commandtype.storedprocedure; cmd.parameters.add("@ubicacion", sqldbtype.int).value = ubicacion; con.open(); slider1.datasource = cmd.executereader(); slider1.databind(); } } } protected void bindslider2(int ubicacion) { using (sqlconnection con = conexion.conecta()) { using (sqlcommand cmd = new sqlcommand("selgacetaubicacion", con)) { cmd.commandtype = commandtype.storedprocedure; cmd.parameters.add("@ubicacion", sqldbtype.int).value = ubicacion; con.open(); slider2.datasource = cmd.executereader(); slider2.databind(); } } }
i tried code, , found issues:
1- review how build carousel markup depending on version of bootstrap using. tried bootstrap v3.1.0 , had change parts of markup. refer documentation or this sample.
instance, <div class="item"> should placed inside repeater, , should have <div class="container"> immediatly inside of it.
2- not initializing correctly both carousels jquery, correct it:
$("#carousel div.item:first").addclass("active"); $("#carousel2 div.item:first").addclass("active");
Comments
Post a Comment