Grow your CSS skills. Land your dream job.

Unslider, simple jQuery slider not working

  • # May 30, 2013 at 12:39 pm

    Ok so I have spent hours trying to debug this one, I am at a total loss as to the erratic behaviour of this jQuery slider on my site.

    The first slide doesn’t even load and then once the second one loads its container expands and the image slides have a huge amount of padding on them…

    If anyone has a spare moment I’d really appreciate some help.

    http://firstelectricgates.myshopify.com/

    Thanks guys!

    # May 30, 2013 at 2:52 pm

    Can you share your code here, or can you send the password to get into that page?

    # May 30, 2013 at 3:01 pm

    Oh gosh I’m sorry its “haisir”

    # June 14, 2013 at 10:29 am

    I had to change the unslider.js code to fix my installation. On line 55-56, it says this:
    // Set the main element
    el.css({width: _.max[0], height: li.first().outerHeight(), overflow: ‘hidden’});
    I then manually set the initial height for my first slide by changing it to this:

    // Set the main element
    el.css({width: _.max[0], height: li.first().height(600), overflow: ‘hidden’});

    Note that you’ll need to set the number to your slide height. This will still allow the rest of the slides to auto-adjust in height, as we’re only setting the initial slide.

    # December 19, 2013 at 11:05 am

    Don’t know if either of you are still looking for a solution, but I’ve found the actual issue here.

    I assume you are initializing unslider on $(document).ready();. When you do so, unslider will start before the image is loaded. My solution was simply to wait to make the call until the image is loaded

    This caused another bug in IE, unfortunately, because IE would not fire the load event if the image was caches. In order to fix that, I used a solution I actually found here on css-tricks. (http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/). I add the current time from the javascript Date() object as a query string to the src attribute of the image, and this prevents IE from loading the cached image.

    $(document).ready(function(){
    //start homepage banner
    //in order for the unslider plugin to correctly calculate the height of an image’s parent div on page load, we must not initialize until its first image has loaded

                    //hide the banner so that users don't see the images until the slider is initialized
                    $('.banner').hide();
    
                    var callUnslider = function(){
    
                        $('.banner').show();
    
                        var unslider = $('.banner').unslider({
                            speed : 500,                //  The speed to animate each slide (in milliseconds)
                            delay : 3000,               //  The delay between slide animations (in milliseconds)
                            complete : function() {},   //  A function that gets called after every slide animation
                            keys : true,                //  Enable keyboard (left, right) arrow shortcuts
                            dots : true,                //  Display dot navigation
                            fluid : false               //  Support responsive design. May break non-responsive designs
                        });
                    }
                    $('.unslider-arrow').click(function() {
                        var fn = this.className.split(' ')[1];
    
                        //  Either do unslider.data('unslider').next() or .prev() depending on the className
                        unslider.data('unslider')[fn]();
                    });
    
                    //if IE caches the images, it will never fire a load event for it
                    //here we add a query string to the first banner image's src attribute, so that IE will not cache the image.
    
                    //get the image's src attribute
                    var source = $('.banner ul li img').first().attr("src");
                    //add the date as a query string to the image's src attribute, so that every time the page is refreshed, IE will reload it and fire the load event
                    $('.banner ul li img').first().attr("src",source + "?" + new Date().getTime());
                    //initilize the unslider plugin, but only after the first image loads
                    $('.banner ul li img').first().load(function(){callUnslider ()});
    

    });

    # February 5, 2014 at 9:54 am

    I see that this post was in December but I am running into the same issue as theplastickid. I cannot seem to find a solution for it – I tried erling and kaelindesign’s with no luck.

    Does anyone else have any ideas or have a fix for this issue?

    # February 5, 2014 at 10:02 am

    Can you post code, or better yet a link?

    # February 5, 2014 at 10:12 am

    Thanks for the quick reply!
    I will try my best to make this not too complicated. I cannot provide a link to the site but I can provide the code.

    The design of it came from here:

    http://summit7systems.com/a-simple-jquery-content-slider-for-sharepoint-200720102013-and-o365/

    The slider is being fed from a SharePoint list that contains the images.

    here is the code for the slider:

    `<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
     <script type="text/javascript" src="/SiteAssets/jquery.SPServices-0.7.1a.min.js"></script>
     <script type="text/javascript" src="/SiteAssets/unslider.min.js"></script>
    
     <style type="text/css">
     .hillbillyBanner { position: relative; overflow: auto;   }
         .hillbillyBanner li { list-style: none; }
             .hillbillyBanner ul li { float: left; }
                 .hillbillyBanner ul {margin-left: -40px;}
    
    </style>
    
    <script type="text/javascript">
    
          jQuery(document).ready(function($) {
    
             var sliderList = "Slider"; // Name of the list that contains slides
             var slideContentField = "HTML"; //Name of the Rich text field that has slide content
             var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image
    
             HillbillySlider(sliderList,slideContentField,slideBackgroundImageField);
    
         });
    
        function HillbillySlider(sliderList,slideContentField,slideBackgroundImageField) {
    
            //query to retrieve all items
            var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
    
            //return fields for slide content and background picture
            var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
    
            $().SPServices({
                 operation: "GetListItems",
                 async: true,
                 listName: sliderList,
                 CAMLViewFields: camlViewFields,
                 CAMLQuery: query,
                 completefunc: function(xData, Status) {
                      $(xData.responseXML).SPFilterNode("z:row").each(function() {
                      var slideContent = ($(this).attr("ows_"+slideContentField));
                      var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
                      //create slide (li) and append it to other slides
                      $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\">"+slideContent+"</li>");
                 }); // end completefunc
                 //start the slider
                 $('.hillbillyBanner').unslider();
               }
            }); // end SPServices call
    
    
        }
    </script>
    
    <div class="hillbillyBanner"><ul id='hillbillySlider'></ul></div>`
    

    I also have some CSS on the page:
    `

    .dots {
    position: absolute;
    left: 225px;
    top: 190px;
    text-align: center;

    }

    .dots li {
    display: inline;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    text-indent: -999em;
    color: #FFFFFF;
    border: 4px solid #0066CC;
    background: #0066CC;
    border-radius: 6px;
    cursor: pointer;
    opacity: .60;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
    }

    .dots li.active {
    background: #0066CC;
    opacity: 1;
    }
    `

    # February 5, 2014 at 10:29 am

    Can you show me how you tried to implement my code, since this implementation of Unslider is rather different?

    # February 5, 2014 at 12:05 pm

    Sure, I tried it 2 different ways -

    Method 1:

     <style type="text/css">
     .hillbillyBanner { position: relative; overflow: auto;   }
         .hillbillyBanner li { list-style: none; }
             .hillbillyBanner ul li { float: left; }
                 .hillbillyBanner ul {margin-left: -40px;}
    
    </style>
    
    <script type="text/javascript">
    
          jQuery(document).ready(function($) {
    
             var sliderList = "Slider"; // Name of the list that contains slides
             var slideContentField = "HTML"; //Name of the Rich text field that has slide content
             var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image
    
             HillbillySlider(sliderList,slideContentField,slideBackgroundImageField);
    

    **
    $(‘.hillBillyBanner’).hide();

                var callUnslider = function(){
    
                    $('.banner').show();
    
                    var unslider = $('.banner').unslider({
                        speed : 500,                //  The speed to animate each slide (in milliseconds)
                        delay : 3000,               //  The delay between slide animations (in milliseconds)
                        complete : function() {},   //  A function that gets called after every slide animation
                        keys : true,                //  Enable keyboard (left, right) arrow shortcuts
                        dots : true,                //  Display dot navigation
                        fluid : false               //  Support responsive design. May break non-responsive designs
                    });
                }
                $('.unslider-arrow').click(function() {
                    var fn = this.className.split(' ')[1];
    
                    //  Either do unslider.data('unslider').next() or .prev() depending on the className
                    unslider.data('unslider')[fn]();
                });
    
                //if IE caches the images, it will never fire a load event for it
                //here we add a query string to the first banner image's src attribute, so that IE will not cache the image.
    
                //get the image's src attribute
                var source = $('.hillBillyBanner ul li img').first().attr("src");
                //add the date as a query string to the image's src attribute, so that every time the page is refreshed, IE will reload it and fire the load event
                $('.hillBillyBanner ul li img').first().attr("src",source + "?" + new Date().getTime());
                //initilize the unslider plugin, but only after the first image loads
                $('.hillBillyBanner ul li img').first().load(function(){callUnslider ()});**__
    
    
         });
    
    
        function HillbillySlider(sliderList,slideContentField,slideBackgroundImageField) {
    
            //query to retrieve all items
            var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
    
            //return fields for slide content and background picture
            var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
    
            $().SPServices({
                 operation: "GetListItems",
                 async: true,
                 listName: sliderList,
                 CAMLViewFields: camlViewFields,
                 CAMLQuery: query,
                 completefunc: function(xData, Status) {
                      $(xData.responseXML).SPFilterNode("z:row").each(function() {
                      var slideContent = ($(this).attr("ows_"+slideContentField));
                      var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
                      //create slide (li) and append it to other slides
                      $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\">"+slideContent+"</li>");
                 }); // end completefunc
                 //start the slider
                 $('.hillbillyBanner').unslider();
               }
            }); // end SPServices call
    
    
    
    
    
    
        }
    </script>
    
    <div class="hillbillyBanner"><ul id='hillbillySlider'></ul></div>
    

    Method 2:

     <style type="text/css">
     .hillbillyBanner { position: relative; overflow: auto;   }
         .hillbillyBanner li { list-style: none; }
             .hillbillyBanner ul li { float: left; }
                 .hillbillyBanner ul {margin-left: -40px;}
    
    </style>
    
    <script type="text/javascript">
    
          jQuery(document).ready(function($) {
    

    **$(‘.hillBillyBanner’).hide();

                var callUnslider = function(){
    
                    $('.banner').show();
    
                    var unslider = $('.banner').unslider({
                        speed : 500,                //  The speed to animate each slide (in milliseconds)
                        delay : 3000,               //  The delay between slide animations (in milliseconds)
                        complete : function() {},   //  A function that gets called after every slide animation
                        keys : true,                //  Enable keyboard (left, right) arrow shortcuts
                        dots : true,                //  Display dot navigation
                        fluid : false               //  Support responsive design. May break non-responsive designs
                    });
                }
                $('.unslider-arrow').click(function() {
                    var fn = this.className.split(' ')[1];
    
                    //  Either do unslider.data('unslider').next() or .prev() depending on the className
                    unslider.data('unslider')[fn]();
                });
    
                //if IE caches the images, it will never fire a load event for it
                //here we add a query string to the first banner image's src attribute, so that IE will not cache the image.
    
                //get the image's src attribute
                var source = $('.hillBillyBanner ul li img').first().attr("src");
                //add the date as a query string to the image's src attribute, so that every time the page is refreshed, IE will reload it and fire the load event
                $('.hillBillyBanner ul li img').first().attr("src",source + "?" + new Date().getTime());
                //initilize the unslider plugin, but only after the first image loads
                $('.hillBillyBanner ul li img').first().load(function(){callUnslider ()});**__
    
    
             var sliderList = "Slider"; // Name of the list that contains slides
             var slideContentField = "HTML"; //Name of the Rich text field that has slide content
             var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image
    
             HillbillySlider(sliderList,slideContentField,slideBackgroundImageField);
    
    
    
         });
    
    
        function HillbillySlider(sliderList,slideContentField,slideBackgroundImageField) {
    
            //query to retrieve all items
            var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
    
            //return fields for slide content and background picture
            var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
    
            $().SPServices({
                 operation: "GetListItems",
                 async: true,
                 listName: sliderList,
                 CAMLViewFields: camlViewFields,
                 CAMLQuery: query,
                 completefunc: function(xData, Status) {
                      $(xData.responseXML).SPFilterNode("z:row").each(function() {
                      var slideContent = ($(this).attr("ows_"+slideContentField));
                      var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
                      //create slide (li) and append it to other slides
                      $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\">"+slideContent+"</li>");
                 }); // end completefunc
                 //start the slider
                 $('.hillbillyBanner').unslider();
               }
            }); // end SPServices call
    
    
    
    
    
    
        }
    </script>
    
    <div class="hillbillyBanner"><ul id='hillbillySlider'></ul></div>
    
    # February 5, 2014 at 12:08 pm

    Wow, I am not sure why it got posted the way it did…Basically I tried adding the below code right before the
    jQuery(document).ready(function($) {

    and then I tried adding it right after

    HillbillySlider(sliderList,slideContentField,slideBackgroundImageField);

    `
    $(‘.hillBillyBanner’).hide();

                var callUnslider = function(){
    
                    $('.banner').show();
    
                    var unslider = $('.banner').unslider({
                        speed : 500,                //  The speed to animate each slide (in milliseconds)
                        delay : 3000,               //  The delay between slide animations (in milliseconds)
                        complete : function() {},   //  A function that gets called after every slide animation
                        keys : true,                //  Enable keyboard (left, right) arrow shortcuts
                        dots : true,                //  Display dot navigation
                        fluid : false               //  Support responsive design. May break non-responsive designs
                    });
                }
                $('.unslider-arrow').click(function() {
                    var fn = this.className.split(' ')[1];
    
                    //  Either do unslider.data('unslider').next() or .prev() depending on the className
                    unslider.data('unslider')[fn]();
                });
    
                //if IE caches the images, it will never fire a load event for it
                //here we add a query string to the first banner image's src attribute, so that IE will not cache the image.
    
                //get the image's src attribute
                var source = $('.hillBillyBanner ul li img').first().attr("src");
                //add the date as a query string to the image's src attribute, so that every time the page is refreshed, IE will reload it and fire the load event
                $('.hillBillyBanner ul li img').first().attr("src",source + "?" + new Date().getTime());
                //initilize the unslider plugin, but only after the first image loads
                $('.hillBillyBanner ul li img').first().load(function(){callUnslider ()});
    

    `

    # February 5, 2014 at 12:29 pm

    Ok. There may be two (maybe more) issues here.

    One is that $(‘.hillBillyBanner ul li img’).first() refers to the first image, as in the first tag with in your

    <

    ul>. It does not refer to a background image, which is what the variable “picture ” is going to be . That selector will look for the first time the following pattern occurs:

    <ul class="hillBillyBanner "><li><img src="someurl.jpg"/></li></ul>
    

    It will not look for a background image. Waiting to fire the Unloader() function until after the background image is loaded is a bit more complicated. You might find some insights here: http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded. Essentially what you need to do is to actually explicitly load that image somewhere within the dom, hide it, and then fire the unslider(). Does that make sense?

    The other issue I see is that there is nothing that I can see in the code you have provided that sets the container element to the height of the background image. You may just end up specifying a height for your element, defined in your code as “var slideContent “.

    # February 5, 2014 at 3:40 pm

    Thanks again for the reply!

    That makes sense, I didn’t think about having to load that background image as well. I know that the first time it loads, it displays just a sliver of the first image, then once it cycles through it displays completely. When it shows that sliver, it doesn’t show that background image.

    I will have to take a look at that link you sent and look into it a bit more.

    As for the other issue you stated, I believe that is because the height of the container is being set in a different JS file that is referenced:

    (function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:true,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);this.opts=e.extend(this.opts,n);this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();if(this.opts.fluid){var r=function(){n.el.css("width",Math.min(Math.round(n.el.outerWidth()/n.el.parent().outerWidth()*100),100)+"%")};r();e(window).resize(r)}if(this.opts.arrows){this.el.parent().append('<p class="arrows"><span class="prev">←</span><span class="next">→</span></p>').find(".arrows span").click(function(){e.isFunction(n[this.className])&&n[this.className]()})}if(e.event.swipe){this.el.on("swipeleft",n.prev).on("swiperight",n.next)}};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){n.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active");this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:n.prev,39:n.next,27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.next=function(){return n.stop().move(n.current+1)};this.prev=function(){return n.stop().move(n.current-1)};this.dots=function(){var t='<ol class="dots">';e.each(this.items,function(e){t+='<li class="dot'+(e<1?" active":"")+'">'+(e+1)+"</li>"});t+="</ol>";this.el.addClass("has-dots").append(t).find(".dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false)

    Thanks for all of the help, it is appreciated. I am not too familiar with jqery/JS so I am trying learn a bit as I go.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".