Picture Caroussel coding | Community Development | Sandbox ConnAct

Coding will only work in ASPX pages direct.


<CFControl:DyveContentListControl runat="server" ParentContentID="238" NumberOfRecords="5" SpaceID="7" EntityType="6" SortOrderType="Descending" SortByColumn="DateCreated" EmptyContentControlID="EmptyContentControl">
                    <HeaderTemplate>
                        <div class="axero-widget axero-widget-layout axero-widget-hide-header">
                            <div class="axero-widget-content">
                                <div class="carousel carousel-fade slide" id="myCarousel">
                                    <ol class="carousel-indicators">
                                    </ol>
                                    <div class="carousel-inner">
                    </HeaderTemplate>
                    <ItemTemplate>
                                    <div class="item <%# Container.ItemIndex == 0 ? "active" : string.Empty  %>">
                                        <img src="<%# (Eval("ContentMediaUrl")!= null && Eval("ContentMediaUrl").ToString().Length > 0) ? Eval("ContentMediaUrl").ToString() : "/Themes/default/images/photo-placeholder.gif" %>" alt="<%# Eval("ContentTitle")%>" />
                                        <div class="carousel-caption">
                                            <h4><%# Eval("ContentTitle")%></h4>
                                            <p><%# CFHttpUtility.HtmlDecode(Utilities.GetSummary(Eval("ContentSummary").ToString(),180))%></p>
                                        </div>
                                    </div>
                    </ItemTemplate>
                    <FooterTemplate>

                                    </div>
                                    <a data-slide="prev" href="#myCarousel" class="left carousel-control">&#8249;</a>
                                    <a data-slide="next" href="#myCarousel" class="right carousel-control">&#8250;</a>
                                    </div>

                                    <script type="text/javascript">
                                        (function () {
                                            var html = '', carouselSelector = '#myCarousel', items = $(carouselSelector).find('div.item'),
                                            carouselIndicators = $(carouselSelector).find('ol.carousel-indicators');
                                            for (var i = 0, len = items.length; i < len; i++) {
                                                html = html + '<li data-target="' + carouselSelector + '" data-slide-to="' + i + '"></li>';
                                            }
                                            carouselIndicators.html(html);
                                            carouselIndicators.find('li:eq(0)').addClass('active');
                                            $(carouselSelector).find('div.item:eq(0)').addClass('active');
                                            $( document ).ready(function() { $('#myCarousel').carousel(); });
                                        })();
                                    </script>
                                    </div>
                                </div>
                    </FooterTemplate>
                    </CFControl:DyveContentListControl>