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 43 posts 238 karma points MVP 2x c-trib
    Dec 16, 2015 @ 12:17
    emma burstow
    0

    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

  • Jinesh 15 posts 95 karma points
    Dec 16, 2015 @ 13:16
    Jinesh
    0

    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.

  • gary 385 posts 915 karma points
    Dec 16, 2015 @ 23:49
    gary
    100

    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

  • emma burstow 43 posts 238 karma points MVP 2x c-trib
    Dec 17, 2015 @ 08:45
    emma burstow
    0

    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!

Please Sign in or register to post replies

Write your reply to:

Draft