Empty space appearing at the end of my carousel

Question

I have used this script to create an infinite carousel on my website here. It's been customized with CSS so the first and last items are displayed half way.

If you keep clicking the right arrow, you will end up hitting an empty space at the end. So far I haven't been able to fix this. Can anybody offer any solutions?

Here is the relevant script:

/**
 * @author Stéphane Roucheray 
 * @extends jquery
 */
jQuery.fn.simplecarousel = function(previous, next, options){
    var sliderList = jQuery(this).children()[0];

    if (sliderList) {
        var increment = jQuery(sliderList).children().outerWidth(true),
        elmnts = jQuery(sliderList).children(),
        numElmts = elmnts.length,
        sizeFirstElmnt = increment,
        shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
        firstElementOnViewPort = 1,
        isAnimating = false;

        for (i = 0; i < shownInViewport; i++) {
            jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
            jQuery(sliderList).append(jQuery(elmnts[i]).clone());
        }

        jQuery(previous).click(function(event){
            if (!isAnimating) {
                if (firstElementOnViewPort == 1) {
                    jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                    firstElementOnViewPort = numElmts;
                }
                else {
                    firstElementOnViewPort--;
                }

                jQuery(sliderList).animate({
                    left: "+=" + increment,
                    y: 0,
                    queue: true
                }, "swing", function(){isAnimating = false;});
                isAnimating = true;
            }

        });

        jQuery(next).click(function(event){
            if (!isAnimating) {
                if (firstElementOnViewPort > numElmts) {
                    firstElementOnViewPort = 2;
                    jQuery(sliderList).css('left', "0px");
                }
                else {
                    firstElementOnViewPort++;
                }
                jQuery(sliderList).animate({
                    left: "-=" + increment,
                    y: 0,
                    queue: true
                }, "swing", function(){isAnimating = false;});
                isAnimating = true;
            }
        });
    }
};

#home-carousel-container {
    position: relative;
}
#home-carousel {
    overflow: hidden;
}
#home-carousel ul {
    margin-left: -143px;
    padding: 0;
    position: relative;
}
#home-carousel li {
    float: left;
    height: 645px;
    list-style: none outside none;
    margin: 0 3px;
    width: 256px;
}

enter image description here

what are the revelant adaptations (javascript/css) that you've added to the carousel? — C.., Mar 04 '13 at 15:22
try to include the code in your question.. to avoid link rot — abbood, Mar 04 '13 at 15:30
The carousel should really show 4 full slides at once. The issue your facing is when you click left/right, it is removing that image to push it on the other end to create the continuous effect. It appears you've modified or incorrectly setup your carousel so that it hides half of the first/last visible slides. — Gavin, Mar 04 '13 at 15:41

score 2 · Accepted Answer · answered Mar 04 '13 at 15:44

2

As per my comment.

You have set a negative left-margin on your carousel causing it to hide half of an image. As a result when you click next/previous, it shows where an image is moved to create the continuous affect.

Witihin your css, I changed

#home-carousel ul{
  position: relative;
  padding: 0;
  margin-left: -143px;
}

to

#home-carousel ul{
  position: relative;
  padding: 0;
  margin-left: -3px;
}

And had no problems what so ever.

Screenshot of the page with the modification - In Chrome

answered Mar 04 '13 at 15:44

Gavin

6,284
5
30
38

But if I remove that negative margin, I'd lose the effect that only half of my first and last images would appear instead of the whole image. :) – farjam Mar 04 '13 at 15:50
The carousel was not designed to do that. By using a negative margin, you are showing an area of the carousel that isn't intended to be shown and as a result, you're getting this effect. You may have to modify the logic used within the javascript that creates the carousel. – Gavin Mar 04 '13 at 16:01

Empty space appearing at the end of my carousel

1 Answers1