Creating a responsive slider

[robbinj]

I’m creating my own slider and I need some help making it responsive. Right now it works with the responsive part on the first slide, but when I go to the next slide (in this case, any li that is NOT first child) the positioning and width’s of the li’s doesn’t add up and everything gets wrong.

It’s hard to explain and I’d love if anyone could take a look here:

http://robbinj.se/r/

I have a wrapper with a width of 100% and every li’s width gets set to the width of the wrapper of 100%. If you don’t understand what I’m after try go to the page, resize your browser on the first slide, that is how I want it to work on all the other slides as well but I need some ideas on how to do it!

**CSS**:

#sliderContainer #slider {width: 100%; height: 100%; float: left; overflow: hidden; border: solid 1px #000;}
#slider ul {width: 10000px; height: 100%; float: left; display: inline; list-style: none;}
#slider ul li {width: auto; height: 100%; float: left; background-color: #fff; text-align: center;}
#slider li img {max-width: 1140px; height: 100%;}

**jQuery**:

var slideLiWidth = $(‘#slider’).width(),
slideUl = $(‘#slider ul’),
slideLi = $(slideUl).find(‘li’),
slides = $(slideLi).length,
slideNav = $(‘.slideNav’),
current = 1;

slideLi.width(slideLiWidth);

$(window).resize(function() {
var slideLiWidth = $(‘#slider’).width();
slideLi.width(slideLiWidth);
});

slideNav.click(function() {
dir = $(this).data(‘dir’);
transition();
});

function transition() {
var slideLiWidth = $(‘#slider’).width();
if (dir === ‘next’ && current < slides) {
slideUl.transition({x: ‘-=’+slideLiWidth}, 500, ‘ease’);
current++;
}
else if (dir === ‘back’ && current > 1) {
slideUl.transition({x: ‘+=’+slideLiWidth}, 500, ‘ease’);
current–;
}
}

[Malgosia]

Hi.
Change li position after resize window (image should be always on center).

f.e

$(window).resize(function() {
slideLiWidth = $(‘#slider’).width();
slideLi.width(slideLiWidth);

/* center your current slide */
var transform = slideLiWidth*(current-1);
slideUl.transition({x : ‘-‘ + transform+’px’});
});

I hope it resolves your problem.

[Author]

Posts