a faulty idangerous slider - Using Umbraco 7

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

Dec 16, 2015 @ 12:17

A faulty iDangero.us slider

Hi there,

I have a slider that sliders but the arrows don't work and one that works perfectly. A few of us have tried to work out why one is working and the other is not. Any ideas?

Below is the faulty slider:

@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="#"><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>

And the working one:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

<div class="section clearfix" id="sponsors">
    <div class="wrapper wide">
        <h2>Our Sponsors</h2>

        <div class="device">
            <a class="arrow-left" href="#"><i class="fa fa-chevron-left"></i></a> 
            <a class="arrow-right" href="#"><i class="fa fa-chevron-right"></i></a>
            <div class="swiper-container3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="/media/2387/logo-sponsor-exocet.png" alt="FAST Exocet logo" title="FAST Exocet are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2382/logo-sponsor-alcosense.png" alt="AlcoSense logo" title="AlcoSense are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2386/logo-sponsor-duo.png" alt="DUO plc logo" title="DUO plc are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2385/logo-sponsor-elites.png" alt="E-Lites logo" title="E-Lites are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2383/logo-sponsor-cheltenham-audi.png" alt="Cheltenham Audi logo" title="Cheltenham Audi are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2394/logo-sponsor-pole-position.png" alt="Pole Position logo" title="Pole Position are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2391/logo-sponsor-phil.png" alt="Phil Laughton Photography logo" title="Phil Laughton Photography are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2384/logo-sponsor-corbeau.png" alt="Corbeau logo" title="Corbeau are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2389/logo-sponsor-finch.png" alt="Finch Signs logo" title="Finch Signs are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2390/logo-sponsor-onkyo.png" alt="Onkyo logo" title="ONKYO are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2393/logo-sponsor-pie.png" alt="pie logo" title="PIE, Property Information Exchange are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2395/logo-sponsor-qacoustics.png" alt="Q Acoustics logo" title="Q Acoustics are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2396/logo-sponsor-ttt.png" alt="Tin Top Tuesday logo" title="Tin Top Tuesday are proud sponsors of Rob Austin Racing">
                    </div>
                    <div class="swiper-slide">
                        <img src="/media/2388/logo-sponsor-forge.png" alt="Forge Motorsport logo" title="Forge Motorsport are proud sponsors of Rob Austin Racing">
                    </div>
                </div>
            </div>
        </div>

        <img class="audi exocet wow bounceInLeft" data-wow-duration=".5s" data-wow-delay="0s" data-wow-offset="150" data-wow-iteration="1" src="/media/2467/rar-audi-austin-101.png" alt="Rob Austin's BTCC Rob Austin Racing Audi A4" title="Rob Austin's BTCC Rob Austin Racing Audi A4">
        <img class="audi alcosense wow bounceInLeft" data-wow-duration=".5s" data-wow-delay="0.25s" data-wow-offset="150" data-wow-iteration="1" src="/media/2463/rar-audi-abbott-54.png" alt="Hunter Abbott's BTCC Rob Austin Racing Audi A4" title="Hunter Abbott's BTCC Rob Austin Racing Audi A4">

    </div>
</div>

I've spent two days so far trying to work out where it's gone wrong. Any ideas at all would be welcomed.

Thanks,

Emma

Copy Link

Jinesh 15 posts 95 karma points

Dec 16, 2015 @ 13:16

Hi,

Compare Html of both page that will helpful to find problem if the html is same then check the arrow images(if it comes from file system) is accessible in umbraco, still problem not found then check for javascript or jquery files are conflicted or not.

Copy Link

gary 385 posts 916 karma points

Dec 16, 2015 @ 23:49

Hi

Maybe a bit late with a reply, but seeing as one works and one doesn't we can only look at the differences. If it slides then, in theory everything is in place for it to work, but the arrows do not function.

So, the difference is the container, swiper-container3 works, but -alt and 2 do not.

If the width is set on 3 differently than on alt and 2, you could effectively have a div covering the buttons. Although they are visible, they are not clickable as they are underneath another div.

Alternatively, if the width is not set anywhere in the subsequent divs, ie news-story or headline, they could be inheriting the width from the parent once again effectively covering the buttons.

With issues like this, my route is to use F12 in Firefox, it just seems much easier to "see" than in any other browser.

Without everything to see, this maybe a bit of a stab in the dark, but worth checking all the same.

Hope it helps

Gary

Copy Link

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

Dec 17, 2015 @ 08:45

Thanks guys! I took your advice and looked for the differences but then discovered that elsewhere in the scripts folder, the previous developer had referenced a class called swiper-gallery that didn't exist. Once i commented that out, the slider in question started working. Woop!

Copy Link

is working on a reply...

Flag this post as spam?

A faulty iDangero.us slider