制作响应式图像滑块/轮播

Question

我正在创建自己的滑块，我需要一些帮助以使其具有响应性。 现在它适用于第一张幻灯片上的响应部分，但是当我转到下一张幻灯片（在这种情况下，任何不是第一个孩子的 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 < slides) {
        slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease');
        current++;
    }
    else if (dir === 'back' && current > 1) {
        slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease');
        current--;
    }
}

Answer 1

问题在于您计算平移距离的方式。您在添加和减去当前列表项宽度的翻译值方面是正确的，但没有考虑到所述值不会随着用户可能调整其视口大小而更新的事实。 当然，这只是对于实际上会在浏览中调整其视口大小的用户的问题。例如，任何使用平板电脑的人都不会遇到任何问题。

不过，如果您真的在寻找完美的滑块，我会这样做： 创建一个变量以记录当前处于活动状态的幻灯片 使用该变量根据调整后的视口调整平移值

代码如下所示：

$(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.
    }
}

我已经评论了添加的行，虽然我无法实际测试上面的代码，但我很确定它会起作用。如果没有，至少我为你指明了正确的方向。

干杯！

Answer 2

问题与选择以像素为单位指定宽度和滑动偏移量有关，而您应该尝试在% 中定义宽度（例如，每个<li> 都是100% 宽）以及当您为滑块设置动画时您将为第二张^nd图像应用transform: translate(-100%, 0)，然后为第三张^rd应用transform: translate(-200%, 0)，依此类推。

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

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

其他方法，如连续重新计算宽度和负偏移量也可以正常工作，但它们肯定过于昂贵（通常，您需要将一些处理程序附加到resize 事件）并使代码更容易出错因为你引入了一些复杂性。

---

注意：如果您还需要管理无限滑块，可以查看this discussion

Answer 3

我认为这个会有所帮助。这个也将在小型设备和平板电脑上工作。您也可以在同一页面上有多个轮播。只需复制“DIV”-“SpecDataWrap”并更改 ID。

<div class="ContainerWrap">
    <div class="Container">
        <div class="AllSpecsDataWrap">
            <div class="SpecDataWrap" id="SpecDataWrap1">
                <div class="SpecDataSlides activeNavSlide">
                    <img src="http://s19.postimg.org/lzem156s3/image1.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/6cira13mb/image2.jpg" />
                    <div class="SpecDesc SpecDescLeft">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecSlideNavigation">
                    <div class="leftNavSpec SpecSlideNav"></div>
                    <div class="bulletsNavSpec">
                        <ul>
                            <li class="activeImage"></li>
                            <li class="InActiveImage"></li>
                            <li class="InActiveImage"></li>
                        </ul>
                        <div class="clearFix"></div>
                    </div>
                    <div class="RightNavSpec SpecSlideNav"></div>
                </div>
                <div class="clearFix"></div>
            </div>
        </div>
    </div>
</div>

您可以在此处查看 JS 和 CSS 代码： https://jsfiddle.net/raju_sumit/Ld21vutz/

Answer 4

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