Question

I modified a simple image slider in jsfiddle and can’t figure out why I can’t get it to work on my first clients website. Works fine in jsFiddle but not on the site.

It uses a couple other plugins for smooth scrolling (which I think I broke trying to transfer this over =/). This is one of my first ‘clients’ I took on to get my development portfolio going.

Here is a link to the jsFiddle code – http://jsfiddle.net/SbDpR/

JS snippet

$(document).ready(function() {

    var height = 340,
        width = 740,
        slides = 5,
        contentNum = 1;
    $('.testing').html("Content Number - " + contentNum);
    $('.main_inner').css({
    width: slides * width
    });
    $('.next a').click(function(){
        if (contentNum < slides) {  
           $('.main_inner').animate({
            marginLeft: '-' + (width * contentNum)
            }, 600);
            contentNum = contentNum + 1;
            $('.testing').html("Content Number - " + contentNum);
        } else {
           $('.main_inner').animate({
            marginLeft: '0'
            }, 600);
            contentNum = contentNum / contentNum;
             $('.testing').html("Content Number - " + contentNum);
        }
        return false;
    });

    $('.previous a').click(function(){
        if (contentNum > 1) {
           $('.main_inner').animate({
            marginLeft: '+=740'
            }, 600);
            contentNum = contentNum - 1;
            $('.testing').html("Content Number - " + contentNum);
        } else {
            $('.main_inner').animate({
            marginLeft: '-2960'
            }, 600);
            contentNum = 5;
            $('.testing').html("Content Number - " + contentNum);
        }
        return false;
    });
});​

Here is a link to the site to see it in action – http://skeptikalmedia.com/MOM/index.html

I’ve spent the last 4 hours trying to get it to work on the live site. I’ve copied/pasted/deleted/copied/pasted. Currently the script sits on the index page to make sure I didn’t miss importing a file or something.

Any ideas? I’m to the point where I’d almost pay for someone to tell me why it’s not working or turn the JSFiddle into a jQuery plugin.

Answer 1

Your class .wrapper div has position: absolute;. Remove this, and everything looks as it is supposed to, either that, or alter your existing css as follows(position: static is the default positioning for html elements):

.main_inner > div {
    position: static;
}