c# - Bootstrap Carousel with Repeater shows all slides one by one i want to display it 3 items by one -
i using bootstrap carousel slider script inside repeater not working proper.i have projects database table want display projects in slide 3 project 1 slider each slide has 3 project . code display 1 project per slide don't know how make please me . each slide : 1 2 3 second 1 4 5 6 @ same row slider
this link has same slide want slider want it
<!-- begin carousel --> <div class="row"> <div id="realto-carousel-afee" class="carousel slide"> <div class="carousel-navigation pull-right"> <a class="serif italic pull-left view-all-carousel" href="properties-grid-layout-2">all</a> <a class="left carousel-control pull-left" href="#realto-carousel-afee" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control pull-right" href="#realto-carousel-afee" data-slide="next"><i class="fa fa-angle-right"></i></a> </div> <div class="carousel-inner"> <asp:repeater runat="server" id="projectsrepater"> <itemtemplate> <div <%# container.itemindex == 0 ? "class=\"item active\"" : "class=\"item\"" %>> <div class="col-lg-4 col-md-4 col-sm-4 col-sx-12"> <div class="box-container"> <div class="holder"> <a class="overlay" href="" title=""> <span class="more"> <i class="fa fa-zoom-in"></i> </span> <div class="prop_img"> <img width="370" height="210" src="150w" sizes="(max-width: 370px) 100vw, 370px" /> </div> </a> <span class="prop-tag"></span> <div class="prop-info"> <h3 class="prop-title"> <asp:label id="projid" runat="server" visible="false" text='<%# eval("id")%>'></asp:label> <asp:label text='<%# eval("projectname")%>' id="lblprojname" runat="server"><a href="/"></a></asp:label> </h3> <ul class="more-info clearfix"> <li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <label id="lblarea" runat="server" class="qty pull-right">2</label> </li> <li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblpaymentssystem" runat="server" class="qty pull-right">2</span> </li> <li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblreceiveddate" runat="server" class="qty pull-right">2</span> </li> </ul> </div> <!-- prop-info --> </div> <!-- holder --> </div> <!-- box-container --> </div> </div> </itemtemplate> </asp:repeater> protected void page_load(object sender, eventargs e) { // repeterdata(); projectsrepater.datasource = getallprojecct(); projectsrepater.databind(); } public class proj { public int id { get; set; } public string projectname { get; set; } } public list<proj> getallprojecct() { list<proj> listproj = new list<proj>(); sqlconnection con = new sqlconnection(system.web.configuration.webconfigurationmanager.connectionstrings ["alamarconnectionstring"].connectionstring); sqlcommand com = new sqlcommand("select id,projectname projects", con); con.open(); sqldatareader reader = com.executereader(); while (reader.read()) { proj cnt = new proj(); cnt.id = convert.toint32(reader["id"]); cnt.projectname = convert.tostring(reader["projectname"]); listproj.add(cnt); } return listproj; }
see codepen, think solve problem
html
<!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="slide slide1">slide 1 content here</div> </div> <div class="col-xs-4"> <div class="slide slide2">slide 2 content here</div> </div> <div class="col-xs-4"> <div class="slide slide3">slide 3 content here</div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="slide slide4">slide 4 content here</div> </div> <div class="col-xs-4"> <div class="slide slide5">slide 5 content here</div> </div> <div class="col-xs-4"> <div class="slide slide6">slide 6 content here</div> </div> </div> </div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> css
.slide { height: 200px; color: #fff; font-size: 20px; } .slide1 { background: red; } .slide2 { background: yellow; } .slide3 { background: blue; } .slide4 { background: orange; } .slide5 { background: green; } .slide6 { background: violet; }
Comments
Post a Comment