制作响应式图片滑块/轮播 [英] Making a responsive image slider/carousel

问题描述

我创建了自己的滑块，我需要一些帮助，使其响应。
现在它适用于第一张幻灯片上的响应部分，但是当我转到下一张幻灯片（在这种情况下，任何li不是第一个孩子），li的位置和宽度不合计

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/

我有一个宽度为100％的包装，每个li的宽度设置为包装的宽度为100％。如果你不明白我后来尝试去页面，调整你的浏览器的第一张幻灯片，这是我想要它在所有其他幻灯片上的工作，但我需要一些想法如何做

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!

这里是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--;
    }
}

推荐答案

问题与选择以像素指定宽度和幻灯片偏移相关，而应尝试在％中定义宽度（因此，例如每个< li> 是 100％宽），当您为滑块设置动画时，您将应用 transform：translate（-100％ 0），对于2 nd 图像，然后 transform：translate（-200％，0） rd 等。

The problem is related to the choice to specify width and slide offset in pixels when you should instead try to define the width in % (so e.g. every <li> is 100% wide) and when you animate your slider you will apply transform: translate(-100%, 0), for the 2^nd image, then transform: translate(-200%, 0) for the 3^rd and so on.

即使调整浏览器大小也应该可以正常工作，因为您的负偏移和应用宽度将自动随浏览器大小重新计算。浏览器会将您的相对偏移量转换为正确的像素量。

This should work fine even when you resize the browser, since your negative offset and the applied width will be ever automatically recalculated along with the browser size. The browser will turn your relative offset into the correct amount of pixel.

查看这个小提琴的概念证明（尝试使用firefox和chrome）： http://jsbin.com/ecifoc/1/ （移动滑块并调整浏览器大小，然后再次移动滑块）

Take a look at this fiddle for a proof of concept (tried on firefox and chrome) : http://jsbin.com/ecifoc/1/ (move the slider and resize the browser, then move slider again)

其他方法，如连续重新计算的宽度和负偏移也可以工作很好，但他们肯定是太贵了（通常，你需要附加一些处理程序到 resize event），并使代码更容易出错，因为你引入了一些复杂性。

Other methods like continuous recalculation of the width and negative offset may work fine too, but they are definitely too much expensive (typically, you need to attach some handler to the resize event) and make the code more error-prone because you introduce some complexity.

strong>如果您还需要管理无限滑块，您可以查看此讨论

这篇关于制作响应式图片滑块/轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！