Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • emma burstow 42 posts 237 karma points MVP 2x c-trib
    Dec 15, 2015 @ 11:57
    emma burstow
    0

    Slider not working

    Hi guys,

    I am struggling to work out what is wrong with this slider. It should scroll through the relevant articles as the visitor clicks on the arrows but nothing happens. Any ideas?

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    @{var latestNewsX = @Umbraco.TypedContent(2408).Children;}
    
    <div class="section clearfix" id="news">
        <div class="wrapper wide">
    
            <h2>Latest News</h2>
    
            <div class="device">
                <a class="arrow-left" href="page.Id(2564)"><i class="fa fa-chevron-left"></i></a>
                <a class="arrow-right" href="#"><i class="fa fa-chevron-right"></i></a>
                <div class="swiper-container2">
                    <div class="swiper-wrapper">
    
                        @foreach (var articleX in latestNewsX.OrderByDescending(a => a.CreateDate))
                        {
                            var articleDateDefault = Convert.ToDateTime(articleX.CreateDate).ToString("MMMM dd, yyyy");
                            var articleDateOverride = Convert.ToDateTime(articleX.GetPropertyValue("createDateOverride")).ToString("MMMM dd, yyyy");
    
                            <div class="swiper-slide">
                                <div class="news-story">
                                    <div class="headline">
    
                                        @if(@articleDateOverride == "January 01, 0001")
                                        {
                                            <p class="date">@articleDateDefault</p>
                                        }
                                        else{
                                            <p class="date">@articleDateOverride</p>
                                        }
    
                                        <h3>@articleX.GetPropertyValue("title")</h3>
    
                                    </div>
    
                                        @if (articleX.HasValue("imageThumb",true))
                                        {
                                            var _image = Umbraco.Media(articleX.GetPropertyValue("imageThumb",true));
    
                                            <img src="@_image.umbracoFile" alt="@articleX.GetPropertyValue("imageAltText")" title="@articleX.GetPropertyValue("imageTitle")">
                                        }
                                        else
                                        {
                                            <img src="http://placehold.it/555x300" alt="@articleX.GetPropertyValue("imageAltText")" title="@articleX.GetPropertyValue("imageTitle")">
                                        }
    
                                        <a class="btn" href="@articleX.Url" title="Read More">Read More<img class="diagonal" src="/media/2416/diagonal-left-orange.svg" alt="" title=""></a>
                                </div>
                            </div>
                        }
    
                    </div>
                </div>
            </div>
    
            <div class="device alt">
                <div class="swiper-container-alt">
                    <div class="swiper-wrapper">
    
                        @foreach (var articleY in latestNewsX.OrderByDescending(a => a.CreateDate))
                        {
                            var articleDateDefault = Convert.ToDateTime(articleY.CreateDate).ToString("MMMM dd, yyyy");
                            var articleDateOverride = Convert.ToDateTime(articleY.GetPropertyValue("createDateOverride")).ToString("MMMM dd, yyyy");
    
                            <div class="swiper-slide">
                                <div class="news-story">
                                    <div class="headline">
    
                                        @if(@articleDateOverride == "January 01, 0001")
                                        {
                                            <p class="date">@articleDateDefault</p>
                                        }
                                        else{
                                            <p class="date">@articleDateOverride</p>
                                        }
    
                                        <h3>@articleY.GetPropertyValue("title")</h3>
    
                                    </div>
    
                                        @if (articleY.HasValue("image",true))
                                        {
                                            var _image = Umbraco.Media(articleY.GetPropertyValue("image",true));
    
                                            <img src="@_image.umbracoFile" alt="@articleY.GetPropertyValue("imageAltText")" title="@articleY.GetPropertyValue("imageTitle")">
                                        }
                                        else
                                        {
                                            <img src="http://placehold.it/555x300" alt="@articleY.GetPropertyValue("imageAltText")" title="@articleY.GetPropertyValue("imageTitle")">
                                        }
    
                                        <a class="btn" href="@articleY.Url" title="Read More">Read More<img class="diagonal" src="/media/2416/diagonal-left-orange.svg" alt="" title=""></a>
                                </div>
                            </div>
                        }
    
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    
  • Ian 177 posts 728 karma points
    Dec 15, 2015 @ 12:33
    Ian
    100

    Is this supposed to be a javascript powered news slider? What js / library are you using for the slider?

    What I can see from the code posted is that the right arrow only has an empty hash as the href so I would not expect it to do anything as it is at least without some js.

    The href for the left arrow also looks a bit odd to my eye.. is page.Id meant to be something in razor or again something handled in js, the syntax suggests the latter. If it did function at all the way it is I would expect the left arrow to only ever show one thing that has a numerical value of 2564. As it is I wouldn't expect it to navigate back and forth through your collection of news items as you expect.

    Hopefully looking at these two points will help you figure out what needs changing to get it working. If not send a reply with what other js you have in your page for operating the slider or an explanation detailing how this sample works with other code on you page (as yet not posted here).

  • emma burstow 42 posts 237 karma points MVP 2x c-trib
    Dec 15, 2015 @ 12:47
    emma burstow
    0

    Thanks for your Reply, Ian. He has used a Dangero.us swiper from what I can gather. I'll dig around the rest of it and see what I can work out.

Please Sign in or register to post replies

Write your reply to:

Draft