slider not working

emma burstow 43 posts 251 karma points MVP 3x hq c-trib

Dec 15, 2015 @ 11:57

UI Questions

Umbraco 7

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>

Copy Link

Ian 178 posts 752 karma points

Dec 15, 2015 @ 12:33

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).

Copy Link

emma burstow 43 posts 251 karma points MVP 3x hq c-trib

Dec 15, 2015 @ 12:47

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.

Copy Link

is working on a reply...

Flag this post as spam?

Slider not working