Question

所以我有我的Bootstrap轮播的代码，它从Visual Studio中的库中获取图像。现在，我希望通过从SharePoint 2013中的文档库而不是Visual Studio中获取图像来动态地运行此轮播。

Carousel.ascx中的标准代码

 <div class="carousel slide" id="myCarousel" data-ride="carousel">
 <!-- Indicators -->
  <ol class="carousel-indicators" style="top:85%">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

  <div class="carousel-inner">
     <div class="item active" style="height:200px;">
        <a href="<% $SPUrl:~sitecollection/subsite/ %>" runat="server"><img src="../../_layouts/15/Project1/Images/carousel1.png"></a>
     </div>
     <div class="item" style="height:200px;">
        <a href="<% $SPUrl:~sitecollection/subsite/ %>" runat="server"><img src="../../_layouts/15/Project1/Images/carousel2.png"></a>
     </div>
     <div class="item " style="height:200px;">
        <a href="<% $SPUrl:~sitecollection/subsite/ %>" runat="server"><img src="../../_layouts/15/Project1/Images/carousel3.png"></a>
     </div>
     <div class="item " style="height:200px;">
        <a href="<% $SPUrl:~sitecollection/subsite/ %>" runat="server"><img src="../../_layouts/15/Project1/Images/carousel4.png"></a>

（末尾缺少两个结尾的div标签）这完美无缺。但现在我正在尝试使用两个中继器（一个用于指示器，一个用于旋转木马内部）

Carousel.ascx中的新代码

<div class="carousel slide" id="myCarousel" data-ride="carousel">

<!-- Indicators -->
<ol class="carousel-indicators" style="top:85%">
    <asp:Repeater ID="indicatorRepeater" runat="server">
        <ItemTemplate>
            <li class="<%# IndicatorClass(Container.ItemIndex)%>"></li>
        </ItemTemplate>
    </asp:Repeater>
</ol>

<div class="carousel-inner">
    <asp:Repeater ID="carouselRepeater" runat="server">
        <ItemTemplate>
    <div class="<%# CarouselClass(Container.ItemIndex)%>" style="height:200px;">
        <a href="<% $SPUrl:~sitecollection/subsite %>" runat="server"><img src="http://sp2013/Carousel/<%#Eval("LinkFilenameNoMenu")%>"></a>
    </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

（最后结束div标签丢失）代码背后，Carousel.ascx.cs

public partial class Carousel : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SPWeb web = SPContext.Current.Site.RootWeb;

        SPList list = web.Lists.TryGetList("Carousel");

        if (list != null)
        {
            SPListItemCollection collection = list.GetItems();

            if (collection.Count > 0)
            {
                DataTable table = collection.GetDataTable();
                carouselRepeater.DataSource = table;
                carouselRepeater.DataBind();
                indicatorRepeater.DataSource = table;
                indicatorRepeater.DataBind();
            }
        }

        carouselRepeater.ItemDataBound += carouselRepeater_ItemDataBound;
        indicatorRepeater.ItemDataBound += indicatorRepeater_ItemDataBound;
    }

    void carouselRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        string s = "";
    }

    void indicatorRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        string s = "";
    }

    public string CarouselClass(int itemIndex)
    {
        if (itemIndex == 0)
        {
            return "item-active";
        }
        else
        {
            return "item";
        }
    }

    public string IndicatorClass(int itemIndex)
    {
        if (itemIndex == 0)
        {
            return "active";
        }
        else
        {
            return "";
        }
    }
}

问题是当轮播更改为幻灯片2.第一个工作完美且div具有“item-active”类，而指示器具有“active”类。但是在下一张幻灯片中，我得到了图像，但随后它被卡住了。并且指标不会获得活动类。我在不同的网站上搜索了这个，发现这个http://devnet.kentico.com/forums/f65/fp21/t40584/bootstrap-carousel是我能找到的唯一一个，但我不知道它是否对我有帮助。

提前致谢！

Answer 1

也许这可以帮到你

 <div class='<%# Container.ItemIndex == 0 ? "item active" : "item" %>'>

来自

http://forums.asp.net/t/1994608.aspx?Bootstrap+slider+using+repeater+control

在SharePoint 2013中动态地使用asp转发器启动轮播

1 个答案: