スクロールから項目を追加・削除する

このデモでは、スクロール項目の追加・削除方法を示しています。 スクロール・ナビゲータが増加し、次/前のボタンが正しく動作することに注目してください。

新規項目

項目の追加

スタンドアロン・デモ

項目を、circular スクロールへ追加することもできます。 追加、削除ボタンが追加されたことを除き、このページのソースコードは 最小限の設定と同じです。

新規項目

追加している項目は、DIV#newItem の子要素です:

<div id="newItem" style="display:none">
  <div class="added">
    <!-- scrollable items can have anything and any amount -->
    <img src="./img/399232237_6928a527c1_t.jpg" />
    <img src="./img/2796719087_c3ee89a730_t.jpg" />
    <h3>New Item</h3>
  </div>
</div>

addItem 関数

すべての追加された項目は、単一のDIVの clone です。 新しい項目を追加するために、Scrollable APIから addItem メソッドを使用します。 それは、新しい項目である1つの引数を持っています。

// initialize scrollable together with the navigator plugin
$("#scrollable").scrollable().navigator();