如何讓英雄滑塊始終朝向相同的方向

當滑塊到達最後一個圖像時，它會轉到第一個圖像，女巫很好。唯一的問題是，它會帶來不同效果的第一張圖像（不會像往常一樣向左移動，而是向右移動）...如何爲所有幻燈片製作相同的效果？（對於CD-全寬）（的圖像被移動到左，除了從最後的最後one.The過渡到第一個具有相反效應去...）如何讓英雄滑塊始終朝向相同的方向

英雄滑塊：http://codyhouse.co/gem/hero-slider/

我不能理解，是從JS還是從CSS ...它看起來像它的CSS，但我只是沒有看到從哪裏...

它應該是一個translateX效果，但我找不到正確的..

來源

2015-06-05 Adrian C.

試圖改變translateX的值，但沒有接近我需要的..你有什麼想法嗎？ –

可能是js代碼中的東西.. –

在我的經驗與JQuery滑塊：

幻燈片保存在HTML列表中。代碼按順序導航到每個列表項，將其中一個推出視圖以進入下一個。那麼，一旦到了最後，唯一的辦法就是倒退，所以它必須收回才能回去。以另一種方式做這件事更爲複雜。所以它不是那麼有效，它只是在做它被告知的事情。

的代碼是介於瀏覽：

$('.cd-slider-nav li').on('click', function(event){ 
    event.preventDefault(); 
    var selectedItem = $(this); 
    if(!selectedItem.hasClass('selected')) { 
     // if it's not already selected 
     var selectedPosition = selectedItem.index(), 
      activePosition = $('.cd-hero-slider .selected').index(); 
     if(activePosition < selectedPosition) { 
      nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition); 
     } else { 
      prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition); 
     } 

     updateNavigationMarker(selectedPosition+1); 
    } 
});

基本上，當它到達列表的末尾，它會回到起點，就像我說的，它直觀地顯示了這一點。

所以是的，CSS指定了它是如何左右移動的，但它是告訴它在最後回到第1張幻燈片的JQuery，使用由CSS創建的樣式左右移動。

爲了使所有相同，您將更容易找到另一個滑塊。這一個是爲了做它設計的目的而設計的。你將不得不徹底改變CSS和JS，使它做任何不同的事情。

有無數的JQuery滑塊都有自己的動畫和關於它們的額外功能。找到適合您需求的應該不難。

來源

2015-06-05 15:05:00 Christine268

我可以回到幻燈片1，我只是不喜歡視覺效果，當它去第一張幻燈片。這是不同於其他人..但我無法在CSS中找到這種效果.. –

每張幻燈片，在列表中，是並排坐在一起。動畫正在改變視圖。因此，當您從第一張幻燈片滑出幻燈片2時，將一張幻燈片向左滑出視圖，而幻燈片2向左移動到視圖中。這個滑塊不是設計成圍成一圈的，而且它們通常不是。我相信這是可能的，但同樣需要徹底改變代碼，以便找到新的滑塊。 – Christine268

好的，謝謝你的提示.. –

如何讓英雄滑塊始終朝向相同的方向

回答

相關問題