c# - Bootstrap Carousel with Repeater 一张一张地显示所有幻灯片我想一张一张地显示它 3 项

Question

我在 Repeater 中使用 Bootstrap 轮播 slider 脚本，但它无法正常工作。我有元素数据库表，我想通过一个 slider 在幻灯片 3 元素中显示这个元素，每张幻灯片有 3 个元素。我的代码每张幻灯片显示一个元素我不知道如何制作请帮助我。 每张幻灯片:1 2 3 然后第二张 4 5 6 与 slider 在同一行

此链接与我想要的幻灯片相同 slider i want like 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 from 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;
}

Answer 1

看到这个codepen，我想这会解决你的问题

HTML

  <!-- Wrapper for 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;
}

http://codepen.io/Arshmeet/pen/BQKrOb