Fluid Width Slider

Question

I am making a website here: argit.bounde.co.uk

I have followed a tutorial on making a slider and it works on the principle of having a ul of a big width and then the li's floated. This is then all concealed by a div which has overflow: hidden . Then have jquery which animates the margin-left = imgWidth

The rest of my site is fluid width and so obviously I need the slider to follow along other wise it looks a bit silly. At the moment I have given the li's a set width with jquery and then have img's as 100%. This solution is okay, but falls apart when the device doesn't support jQuery so I would prefer a more robust method. I cant set the ul to 100% as then the images no longer are in a line and they simple stack underneath each other

Can anyone think of a way I could achieve this?

Full slider jQuery here:

var current = 1;

function slider () {
var sliderUl = $('div#slider ul'),
    imgs = sliderUl.find('img'),
    imgWidth = imgs.width(), 
    imgLength = imgs.length, 
    totalImgsWidth = imgLength * imgWidth; 

var direction = $(this).data('dir'),
    loc = imgWidth;

if( direction == 'next') {
    ++current;
} else {
    --current;
}

if( current === 0) {
    current = imgLength;
    loc = totalImgsWidth - imgWidth;
    direction = 'next';
} else if ( current - 1 === imgLength ) {
    current = 1;
    loc = 0;
}


transition(sliderUl, loc, direction);
};

function transition( container, loc, direction ) {
var ease;
var unit;

if (direction && loc !== 0) {
    unit = (direction === 'next') ? '-=' : '+=';
}

container.animate({
    'margin-left': unit ? (unit + loc) : loc
})
};

Answer 1

I've linked to a fiddle of a plugin I programmed that does this. The requirements are that the parent container has position: relative, and to a lesser extent overflow: hidden and that it is called after images are loaded. Feel free to take the code and learn from it.

http://jsfiddle.net/dhQk/35K8X/7/show/

JS

$.fn.fitToParent = function (type, align) {
    type = typeof type === 'undefined' ? 'fit' : type;
    align = typeof align === 'undefined' ? 'center' : align;
    return this.each(function () {
        var $this = $(this);
        var $parent = $(this).parent();
        if ($this.is('img')) {
            $this.css({
                'position': 'absolute',
                    'width': '100%',
                    'height': 'auto'
            }).css({ //Allow Height to adjust
                'left': '',
                    'margin-left': '',
                    'top': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
                    'bottom': '',
                    'margin-top': align == 'center' ? (-$this.height() / 2) + 'px' : ''
            });
            //Size by height depending on sizing type
            if (($this.height() > $parent.height() && type === 'fit') || ($this.height() < $parent.height() && type === 'fill')) {
                $this.css({
                    'width': 'auto',
                        'height': '100%'
                }).css({ //Allow Width to adjust
                    'top': '',
                        'margin-top': '',
                        'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
                        'right': align == 'right' ? '0px' : '',
                        'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
                });
            }
            if (type === 'none') {
                $this.css({
                    'width': '',
                        'height': ''
                }).css({ //Allow Width to adjust
                    'top': '50%',
                        'bottom': '',
                        'margin-top': (-$this.height() / 2) + 'px',
                        'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
                        'right': align == 'right' ? '0px' : '',
                        'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
                });
            }
        }
    });
};

To explain the logic, all it does is sets the width to 100% and checks if it's height is greater, if it isn't then width 100% is fine. If not it switches it to height 100%. On images if one size attribute is set then the other one resizes accordingly. After the size logic is complete. it just centers the image using position absolute and margining.

Answer 2

You can detect does device support jQuery:

$('html').addClass('jQuery');

And then use specific css styles for this class:

.jQuery li {
    /* some style */ 
}

If class 'jQuery' setted then device support jQuery.

Answer 3

The simplest method would be to not float the your panels (li's) and set them to be 100% width of the wrapping div. Then when the user navigates, position the next panel out of view to the right at 100% margin, then animate it to 0 margin while you animate the previous panel to -100% margin. Do the opposite when the user selects the previous panel. I don't think this method works well in older IE, but I could be mistaken.

Alternatively, you can bind to the window resize event (it would be best to throttle the event) and resize the panels and any saved widths/heights