如何使用jQuery/CSS3創建「幻燈片庫」面板？

通常我知道如何開始，有幾個教程甚至是經驗，但是現在我甚至不知道如何調用它。也許只是告訴我如何正確定義這可能是我的問題的解決方案（ - >基於名稱，我可以正確搜索）。如何使用jQuery/CSS3創建「幻燈片庫」面板？

讓我們給你這個我剛纔做的快速樣機。 mockup

我在找1：你怎麼稱呼這個，但特別是2：我會如何創建這樣的？

我想創建面板，幾個疊加在彼此之上，並點擊每個面板上的'下一步'按鈕，您可以將該面板移動到左側（或右側（向後））去下一個瓷磚。假設每個面板都是一個組合項目（垂直疊加），並且在每個面板（項目組合項目）中，您可以沿着水平方向前後滑動，以解釋每個方塊上的項目的一部分。

每個瓷磚的佈局由一個具有完整背景圖像（background-size:cover）和半寬度瓷磚文本框的瓷磚組成。當然，這個盒子的文本應該用HTML編寫，而不是通過使用Photoshop將圖像「燒」到響應原因。

我認爲這可以用CSS3和jQuery創建。唯一的問題是：我所有的Google搜索都沒有任何結果，或者導致導出菜單爲Off-canvas，這並不是我想要的。

要回答這個問題，無論是： 1.定義這是怎麼叫/我可以在谷歌 2.鏈接我搜索這一個很好的教程/插件 3.寫出來的代碼，如果這將是簡單。

謝謝大傢伙！

來源

2014-02-21 Sander Schaeffer

它通常被稱爲「內容滑塊」，或者您可以對照片使用相同的概念 - 「滑塊」「旋轉木馬」。有很多插件可用，您可以編寫自己的代碼。這裏有很多例子。 – TimSPQR

這個問題是SO主題，因爲它是要求一個工具或資源或要求我們爲他們的整個程序「寫出代碼」 –

這實際上很簡單，使用所謂的無線電黑客。您可以使用只html和CSS（平滑過渡的CSS3），這是非常可觀的，因爲jQuery代表您的客戶下載一大塊。

基本上，這是怎麼一回事呢（工作演示在這裏：http://codepen.io/anon/pen/jcgxI）：

HTML

我們使用的輸入一臺收音機，以確定哪些「選項卡」應該會出現。收音機在這裏是完美的，因爲當一個人被檢查時，所有其他人都必須不加檢查。出於這個原因，確保你的整個集合的屬性NAME是相同的。

<input type="radio" name="radio-set" id="radio-1" checked="checked"/> 
    <input type="radio" name="radio-set" id="radio-2"/> 
    <input type="radio" name="radio-set" id="radio-3"/> 
    <input type="radio" name="radio-set" id="radio-4"/>

然後，我們將我們的內容真的寫在任何標籤中（結構部分>文章似乎適合）。儘管可以通過單擊單選按鈕本身來完成導航，但也可以通過單擊指向任何輸入的標籤來完成導航，這些標籤通過其屬性FOR設置爲它們引用的ID。

<section> 
    <article id="article-1"> 
     <h2>article 1</h2> 
     <label for="radio-4"></label> 
     <label for="radio-2"></label> 
    </article> 
    <article id="article-2"> 
     <h2>article 2</h2> 
     <label for="radio-1"></label> 
     <label for="radio-3"></label> 
    </article> 
    <article id="article-3"> 
     <h2>article 3</h2> 
     <label for="radio-2"></label> 
     <label for="radio-4"></label> 
    </article> 
    <article id="article-4"> 
     <h2>article 4</h2> 
     <label for="radio-3"></label> 
     <label for="radio-1"></label> 
    </article> 
</section>

CSS

因爲我們將很容易程式化的標籤導航，我們就可以隱藏自己的投入。

input{ display:none; }

將所有的文章相鄰的位置。我在標籤中添加「箭頭」（只需要點擊，在真實設計中，我會將這些字符切換爲字體圖標）。

label:first-of-type::before{content: "<"} 
label:last-of-type::before {content: ">"}

最後，我們使用CSS選擇器「〜」，這意味着「之後的任何同級元素（和他們的孩子）」。這樣，我們說「在第N次輸入檢查後，整個部分滑動到相應的位置」。

input[id$="-1"]:checked ~ section{ transform: translateX(0)  } 
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) } 
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) } 
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }

這是因爲我們使用這個選擇，我們的投入是外，重要的是滑動標籤（這裏的「節」），使他們的移動標籤的兄弟姐妹（或其父母的兄弟姐妹）前。

而且因爲我們要觀察的部分移動，我們添加一個過渡性質：

section{ transition: all 1s; }

如果你整個包住HTML到另一個標籤（防止選擇的影響「〜」傳播到其他部分），您可以爲其他滑塊使用相同的HTML結構，而無需編寫任何額外的CSS！

一個完全成熟的教程與漂亮的工作演示（垂直版本，但不要擔心，這是非常相似的水平），請訪問：http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

PS：在CSS，不要」 t忘記爲轉換和轉換添加所有供應商前綴。總是檢查w3schools.com（編輯：永遠不要相信w3schools，但請檢查其他地方在線！）知道需要哪些前綴。例如：

-webkit-transition: all 1s; 
transition: all 1s;

來源

2014-02-21 16:04:19 Sheraff

如何使用jQuery/CSS3創建「幻燈片庫」面板？

回答

相關問題