Question

我正在创建自己的滑块，我需要一些帮助才能使其响应。现在它适用于第一张幻灯片上的响应部分，但是当我转到下一张幻灯片（在这种情况下，任何不是第一个孩子的li）时，li的定位和宽度不会加起来，一切都会出错

这很难解释，如果有人可以看看，我会很高兴：

我有一个宽度为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%宽）当您为滑块设置动画时，您将对{2> 图像应用transform: translate(-100%, 0)，对3 ^rd应用transform: translate(-200%, 0)，依此类推。< / p>

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

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

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

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

Answer 3

我认为这个会有所帮助。这个也适用于小型设备和平板电脑。您也可以在同一页面上放置多个轮播。只需复制＆＃34; DIV＆＃34; - ＆＃34; SpecDataWrap＆＃34;并更改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

制作响应式图像滑块/旋转木马

4 个答案: