MAKING A RESPONSIVE SLIDER

ben reitman

Total Post:96

Points:676
Posted by  ben reitman
 969  View(s)
Ratings:
Rate this:
Hi Everyone!

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!

Here's the 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--;
    }
}

Thank you in advance!
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Making a responsive slider

    Hi Ben!

    You can try as below!

    var $slider = $('#slider'),
        imgW = $('#slider li').outerWidth(true),
        winW = 0,
        zero = 0;

    function getSizes(){
        winW = $(window).width();
        zero = (winW-imgW)/2;
        $slider.animate({left: zero},0); // This should 'zero' the position on resize
    }

    getSizes(); 


    $(window).resize(function() {
        getSizes();
    });

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!