WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Full Width Slider 2

— アドオンWorldWideScripts.netへ

@ja1wws日付まで滞在するために私達のフィードを購読する!

新しい!あなたがそれを望むように私たちに従ってください!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

全幅スライダー2はフルスクリーン幅に合わせて最適化jQueryの画像スライダーを使用して容易です。

特徴

- jQueryの駆動。
- 応答デザイン。
- 調整可能な遷移速度。
- ホバーのポーズと自動スライドショー。
- すべての主要なブラウザ(IE8以上、Chromeのは、Firefox、Safariやオペラ)との互換性
- 各スライドにタイトル、説明、およびリンクボタンを追加することができます。

新しいメソッド:

addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

新しいオプション:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

すべての設定と例:

 ます。<script type = "text / javascriptの"> $(ドキュメント).ready(関数(){ //新しいスライダーインスタンスを作成します。 VAR my_slider = $( '。たとえば')fws2()。 //設定するには、スライダの設定(オプション)あなたは完全にこのブロックを無視することができます my_slider.settings({ CS:0、//現在のスライド。 0 - 最初に、1 - 2番目の等... 期間:750、//スライドの期間; ミリ秒 hoverpause:1、ホバーで一時停止; // 1 - はい、0 - なし 6000、次のスライドに移動する前に一時停止; //:一時停止 ミリ秒 矢印:1、//表示する矢印。 1 - はい、0 - なし 弾丸:0、//ディスプレイ弾。 1 - はい、0 - なし expandDuration:750、//表示矢印。 1 - はい、0 - なし linktext: '続きを読む'、//ボタンのテキスト(グローバル設定) // 高度なオプション titleHTML: '<H4>%タイトル%</ H4>'、//タイトルのカスタムHTML descriptionHTML: '<P>%DESC%</ P>'、//カスタムHTML記述のための linkHTML:「<a href="%link%">%linktext%</a>の '、//カスタムHTMLのリンクボタン beforeInit:スライダーのinitの前に実行する関数(){} //関数 afterInit:スライダー初期化後に実行する関数(){} //関数 slideStart:機能(スライド){}、//スライド開始時に実行するための機能は、スライドオブジェクトを返します。 slideEnd:機能スライド端で実行する(スライド){} //関数は、スライドオブジェクトを返します。 }); //スライドを追加します my_slider.addSlide({ 画像:「IMG / slide_1.jpg '、//画像ソース タイトル:「スライド1 '、//タイトル 説明: '説明'、//スライドの説明 linktext: ''、//ボタンのテキスト(オプション、そうでない場合は、グローバル設定を使用します) リンク: 'のhttp://サイト' //詳細URLリンクを読みます }); //スライダーを開始 my_slider.start()。 }); </スクリプト> 

チェーンを使用して可変することなく簡単な例:

 ます。<script type = "text / javascriptの"> $(ドキュメント).ready(関数(){ $( '。例1') .fws2({弾丸:1、矢印:0}) .addSlide({画像:「IMG / slide_1.jpg '、タイトル:「スライド1」、説明:'説明 '、リンク:'のhttp://サイト '}) .addSlide({画像:「IMG / slide_2.jpg '、タイトル:「スライド2'、説明: '説明'、リンク: 'のhttp://サイト'}) .addSlide({画像:「IMG / slide_3.jpg '、タイトル:「スライド3'、説明: '説明'、リンク: 'のhttp://サイト'}) 。開始(); }); </スクリプト> 

コー​​ルバック関数を使用して実施例

 ます。<script type = "text / javascriptの"> $(ドキュメント).ready(関数(){ VAR example_slider = $( '。例2')fws2()。 example_slider.settings({ afterInit:関数(){ アラート( 'スライダー準備完了!'); }、 slideEnd:機能(スライド){ 。VARタイトル= slide.find(「タイトル」)のテキスト(); 警告(+タイトル 'これは'); } }); example_slider.addSlide({画像:「IMG / slide_1.jpg '、タイトル:「スライド1」、説明:'説明 '、リンク:'のhttp://サイト '}); example_slider.addSlide({画像:「IMG / slide_2.jpg '、タイトル:「スライド2'、説明: '説明'、リンク: 'のhttp://サイト'}); example_slider.addSlide({画像:「IMG / slide_3.jpg '、タイトル:「スライド3'、説明: '説明'、リンク: 'のhttp://サイト'}); example_slider.start()。 }); </スクリプト> 

例HTMLをカスタマイズします

 ます。<script type = "text / javascriptの"> $(ドキュメント).ready(関数(){ VAR example_slider = $( '。example4')fws2()。 example_slider.settings({ titleHTML: '<H1> <a href="%link%">%タイトル%</a>の</ H1>'、 descriptionHTML: '<P> <Iクラス= "FA FA-チェック" /> <span>の%DESC%</ SPAN> </ P>'、 linktext:「続きを読みます」、 linkHTML:「<a href="%link%">%linktext%%タイトル%について</a>」 }); example_slider .addSlide({画像:「IMG / slide_1.jpg '、タイトル:「スライド1」、説明:'説明 '、リンク:'のhttp://サイト '}) .addSlide({画像:「IMG / slide_2.jpg '、タイトル:「スライド2'、説明: '説明'、リンク: 'のhttp://サイト'}) .addSlide({画像:「IMG / slide_3.jpg '、タイトル:「スライド3'、説明: '説明'、リンク: 'のhttp://サイト'}) 。開始(); }); </スクリプト> 

最新の状態に滞在!

上で私たちに従ってくださいフェイスブックツイッターとアイテムの更新と今後のプラグインやスクリプトに関する最新のニュースを入手!

また、上で私たちに従うことができますInstagramの私たちのプラグインやスクリプトをインストールする方法についてのビデオチュートリアルで、すぐにYouTubeで

変更履歴

2015年12月8日

- Javascriptのコードが書き直されました。
- imagesloaded.jsスクリプトはオプションになりました。
- HTMLは削除されました。 今では完全にJavaScriptから構築されます。
- それは使用されなくなりましたように、Googleのフォントリンクは先頭から削除されます。
- スライダーは、現在$(セレクタ).fws2()を使用して初期化されます。

- 新しいメソッド:

 addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

- 新しいオプション:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

2014年4月10日

- スライダーは現在、ページ上の複数のインスタンスをサポートします。
- 弾丸のナビゲーションを追加しました。
- アロー/箇条書きのナビゲーションは現在、ON / OFFすることができます。
- マウスオーバーでautoslide停止を無効にするオプションが追加されました。
- スライダーは現在、フォント素晴らしい代わりにナビゲーション矢印と弾丸のための画像の使用しています。
- 追加されたキーボードの右/左矢印ナビゲーション。


ダウンロードしてください
このカテゴリー内の他のコンポーネントこの著者のすべてのコンポーネント
コメントよくある質問と回答を求めた

プロパティ

作成:
11月16日12

最後の更新:
12月8日15

高解像度:
はい

推奨ブラウザ:
IE8、IE9、IE10、IE11は、Firefox、Safariの、オペラ、クローム

含まれるファイル:
JavaScriptのJS、HTML、CSS

ソフトウェアバージョン:
jQueryの

キーワード

eコマース, eコマース, 全商品, フル, ジャバスクリプト, jqueryの, JS, 反応します, スライダー, スライドショー, 幅