制作响应式图像滑块/旋转木马
我正在创建自己的滑块，我需要一些帮助才能使其响应。 现在它适用于第一张幻灯片上的响应部分，但当我转到下一张幻灯片（在这种情况下，任何不是第一个孩子的li）时，li的定位和宽度不会加起来，一切都会出错。
这很难解释，如果有人可以看看，我很乐意：
http://robbinj.se/r/
我有一个宽度为100％的包装，每个li的宽度设置为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 1) { slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease'); current--; } } 问题在于计算平移距离的方式。 您在添加和减去当前列表项宽度的转换值时是正确的，但没有考虑到因为用户可能调整其视口大小而不更新所述值的事实。 当然，对于实际上会在浏览中调整其视口大小的用户来说，这只是一个问题。 例如，任何使用平板电脑的人都没有问题。
尽管如此，如果你真的在寻找一个完美的滑块，我会这样做：创建一个变量以保持当前活动的幻灯片的数量使用该变量来调整与resize的视口一致的转换值
这是代码的样子：
$(window).resize(function() { var slideCounter = 1; // Because the first slide is, well ... first. var slideLiWidth = $('#slider').width(); slideLi.width(slideLiWidth); slideUl.transition({x: '-='+slideCounter*slideLiWidth}, 500, 'ease'); // Adjust the UL's transition value to match the current slide position and width. }); function transition() { var slideLiWidth = $('#slider').width(); if (dir === 'next' && current < slides) { slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease'); current++; slideCounter++; // Increment the counter to keep up. } else if (dir === 'back' && current > 1) { slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease'); current--; slideCounter--; // Increment the counter to keep up. } }
我评论了添加的行，虽然我实际上无法测试上面的代码，但我很确定它会起作用。 如果没有，至少我指的是你正确的方向。
干杯!
问题与指定宽度和幻灯片偏移（以像素为单位）的选择有关，而应尝试以%为单位定义宽度（例如，每个
为100%宽），当您为滑块设置动画时，您将应用transform: translate(-100%, 0) ，对于第二个图像，然后transform: translate(-200%, 0)为第3个，依此类推。
即使您调整浏览器大小，这应该可以正常工作，因为您的负偏移量和应用的宽度将随浏览器大小自动重新计算。 浏览器会将您的相对偏移量转换为正确的像素数量。
看一下这个小提琴的概念certificate（在firefox和chrome上试过）： http ： //jsbin.com/ecifoc/1/ （移动滑块并调整浏览器大小，然后再次移动滑块）
其他方法，如连续重新计算宽度和负偏移也可以正常工作，但它们肯定太昂贵（通常，您需要将一些处理程序附加到resize事件）并使代码更容易出错，因为您引入了一些复杂性。
注意：如果您还需要管理无限滑块，可以查看此讨论
我认为这个会有所帮助。 这个也适用于小型设备和平板电脑。 您也可以在同一页面上放置多个轮播。 只需复制“DIV” – “SpecDataWrap”并更改ID。
Choose to be unique.
Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique. 
Choose to be unique.
Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique. 
Choose to be unique.
Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
你可以在这里看到JS和CSS代码： https ： //jsfiddle.net/raju_sumit/Ld21vutz/
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(); });
如果我错过了什么，请在这里检索逻辑： http ： //roxon.in/scripts/infinite_gal/index.html