Unslider, simple jQuery slider not working

[theplastickid]

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!

[JonesCh]

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

[theplastickid]

Oh gosh I’m sorry its “haisir”

[KaelinDesign]

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.

[erling]

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. (https://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 ()});

});

[jcooper88]

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?

[erling]

Can you post code, or better yet a link?

[jcooper88]

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;
}
`

[erling]

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

[jcooper88]

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>

[jcooper88]

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 ()});

`

[erling]

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

[jcooper88]

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.

[bitultorah]

Hey JCooper and The Plastic Kid,

I know that this is an old post, but I also had the problem, and after nothing online worked, I discovered an interesting solution, that works cross-browser and doesn’t require editing the jquery.
I looked at the unslider website , where he mentions that you can access jquery’s data() in his code, and call specific functions, such as move. Therefore, I just used the windows.onload() function which waits until all images are loaded, and then calls the move(0) function, which moves to the first slide. It may take a second or two, but I think that that should be reasonable.

   //start the slider
   $('.hillbillyBanner').unslider();
   var slidey = $('.hillbillyBanner').unslider(), 
         data = slidey.data('unslider');
    window.onload = function () {  data.move(0); }

Let me know if this works for you.

[I am Calvin]

I know this is old, but I am having this problem but with text instead of images.

The text from the previous slide is showing off to the side of the current one.

Here’s my CodePen of it: http://codepen.io/Calsen/pen/gpvWPB

Any help would be greatly appreciated. This is for work and I’m on a deadline.

Thanks,
C

[Author]

Posts