CODEWITHSUNDEEP
twitter-bootstrapsharepointrepeatercarousel
user2881765
user2881765

Reputation: 5

Bootstrap carousel with asp repeater dynamically in SharePoint 2013

So I have the code for my Bootstrap carousel that gets the images from my library in Visual Studio. Now I want this carousel to work dynamically by getting the images from a document library in SharePoint 2013 instead of from Visual Studio.

Standard code in 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>

(Two ending div tags missing at the end) And this works perfectly. But now I'm trying with two repeaters (one for indicators and one for carousel inner)

New code in 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>

(Last ending div tag missing) Code behind, 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 "";
        }
    }
}

The problem is when the carousel Changes to slide 2. The first one works perfect and the div have the class "item-active" while the indicator have the class "active". But in the next slide, I get the image, but then it is stuck. And the indicator does not get the active class. I've searched for this in different sites, and found this one http://devnet.kentico.com/forums/f65/fp21/t40584/bootstrap-carousel which is the only one I could find, but I don't know if it really helps me.

Thanks in advance!

Upvotes: 0

Views: 3419

Answers (1)

Madde Persson
Madde Persson

Reputation: 413

maybe this can help you

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

From

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

Upvotes: 0

Related Questions