制作響應式圖像滑塊/旋轉木馬

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%寬），當您為滑塊設置動畫時，您將應用transform: translate(-100%, 0)對於^第二圖像，然后transform: translate(-200%, 0)為^第三等。

即使您調整瀏覽器大小，這也應該可以正常工作，因為您的負偏移量和應用的寬度將隨瀏覽器大小自動重新計算。 瀏覽器會將您的相對偏移量轉換為正確的像素數量。

看看這個小提琴的概念證明（在firefox和chrome上試過）： http ： //jsbin.com/ecifoc/1/ （移動滑塊並調整瀏覽器大小，然后再次移動滑塊）

其他方法，如連續重新計算寬度和負偏移也可以正常工作，但它們肯定太昂貴（通常，您需要將一些處理程序附加到resize事件）並使代碼更容易出錯，因為您引入了一些復雜性。

---

注意：如果您還需要管理無限滑塊，可以查看此討論

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