EasySlider は、jQuery_jquery に基づいた強力で使いやすいスライディング ドア プラグインです。

Easy Slider は、クリック時に画像やコンテンツを水平または垂直にスライドできるスライド ドア プラグインです。豊富なパラメータ設定があり、CSS を通じて完全に制御できます。したがって、基本的に必要なのは、プラグイン ファイルをリンクし、コンテンツを設定して、CSS のスタイルを設定することだけです。

EasySliderの機能
水平または垂直スライドをサポート
自動スクロールをサポート
連続スライドをサポート
「前の画面」と「次の画面」画面ボタン」
「最初の画面に移動」および「最後の画面」ボタン
隠しコントロール
オプションのコントロール ボタン周囲マーカー
同じページで複数のスライド ドアをサポートできます
はいスライド速度、自動か否か、一時停止間隔など。

EasySlider の使い方

1 つ目は HTML タグ

コードをコピーします コードは次のとおりです。

🎜>

• ここにコンテンツ...


• ここにコンテンツ...
  
• ここにコンテンツ。 .....
  

前
次 🎜>

注: 各 li のコンテンツはスライド レイヤーであり、以下のスパンはスライド ナビゲーションに使用されます。

2. 次に、jquery ライブラリと EasySlider プラグインを呼び出します

コードをコピーします

注: の前に配置

3. 初期化プラグインcode

コードをコピー コードは次のとおりです:

注: 上記のコードの下に配置します。ここで、#sidebar は HTML タグの div 要素に対応します。CSS セレクターは、スクリプトをこのレイヤーに適用する必要があることを示します。クラス名も使用できるため、ここでは
$(".list のように記述されます)。 ")。

.easyslider には多くのパラメータがあります。詳細については作者の原文を参照してください。



コードをコピーします。

コードは次のとおりです。 #slider ul, #slider li{ margin:0; list -style:none; }

#slider, #slider li{

width:500px;
overflow:hidden; {}
span# nextBtn{}


注: 必要に応じてスタイルを設定してください。
大丈夫です。


EasySlider の DEMO デモ



デフォルト設定 (左右反転のみ)

デフォルト設定 (以下はデジタルページ)