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

— Eklenti WorldWideScripts.net için

@tr1wwsGüncel kalmak bizim beslemesine abone olun!

Yeni! Istediğiniz gibi bizi takip edin!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Tam Genişlik Slider 2 tam ekran genişliği için optimize jQuery görüntü kaymak kullanımı kolaydır.

Özellikler

- JQuery tahrik.
- Duyarlı tasarım.
- Ayarlanabilir geçiş hızı.
- Üzerine giderek duraklama Otomatik slayt gösterisi.
- Tüm büyük tarayıcılar (IE8 ve üzeri, Chrome, Firefox, Safari ve Opera) ile uyumlu
- Her slayt başlığı, açıklaması ve Bağlantı düğmesi ekleyebilir miyim.

Yeni Yöntem:

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

Yeni seçenekleri:

 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

Tüm ayarları Örnek:

 <script type = "text / javascript"> $ (document).ready (function () { // Yeni bir kaymak örneği oluşturma var my_slider = $ ('. örneğidir') fws2 (.); // Set kaymak ayarları (isteğe bağlı) tamamen bu bloğu yok sayabilirsiniz my_slider.settings ({ cs: 0, // Geçerli slayt; 0 - ilk 1 - İkinci vb... Süre: 750, // Slayt süresi; milisaniye hoverpause: 1, vurgulu Pause //; 1 - Evet, 0 - Hayır duraklatma: 6000, daha önce bir sonraki slayta gitmek Pause //; milisaniye oklar: 1, // Ekran okları; 1 - Evet, 0 - Hayır mermi: 0, // Ekran mermi; 1 - Evet, 0 - Hayır expandDuration: 750, // Ekran okları; 1 - Evet, 0 - Hayır linktext: // Düğme Metin (Küresel ayar) 'Devamı' // Gelişmiş seçenekler titleHTML: '<h4>% title% </ h4>', // Başlık için özel HTML descriptionHTML: '<p>% art% </ p>' Açıklama, // Custom HTML linkHTML: '<a href="%link%">% linktext% </a>', // Custom HTML için bağlantı düğmesi beforeInit: function () {} // Fonksiyon kaymak init önce çalıştırmak için afterInit: function () {} // Fonksiyon kaymak init sonra çalıştırmak için slideStart: function (slayt) {} // slayt başlamadan çalıştırmak için İşlev, slayt nesnesi döndürür slideEnd: function (slayt) {} slayt ucunda çalıştırmak için // Fonksiyon, slayt nesnesi döndürür }); // Ekleme slayt my_slider.addSlide ({ image: 'img / slide_1.jpg', // Görüntü kaynağı title: 'Slide 1', // Başlık açıklaması: 'Açıklama', // Slayt Açıklama linktext: '' // Düğme Metin (İsteğe bağlı, aksi takdirde küresel ayarlarını kullanır) link: 'http: // web' // Daha URL bağlantısını Oku }); Kaymak Başlangıç ​​// my_slider.start (); }); </ script> 

Zincirleme kullanarak değişken olmadan Kısa bir örnek:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({mermi: 1, oklar: 0}) .addSlide ({image: 'img / slide_1.jpg', title: 'Slide 1', açıklama: 'Açıklama', link: 'http: // web'}) .addSlide ({image: 'img / slide_2.jpg', title: 'Slide 2', açıklama: 'Açıklama', link: 'http: // web'}) .addSlide ({image: 'img / slide_3.jpg', title: 'Slide 3', açıklama: 'Açıklama', link: 'http: // web'}) .start (); }); </ script> 

Örnek geri arama fonksiyonunu kullanarak

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 (.); example_slider.settings ({ afterInit: function () { alert ('kaymak hazır!'); } slideEnd: function (slayt) { var title = slide.find ("title".) Metin (.); alert (+ başlık 'Bu'); } }); example_slider.addSlide ({image: 'img / slide_1.jpg', title: 'Slide 1', açıklama: 'Açıklama', link: 'http: // web'}); example_slider.addSlide ({image: 'img / slide_2.jpg', title: 'Slide 2', açıklama: 'Açıklama', link: 'http: // web'}); example_slider.addSlide ({image: 'img / slide_3.jpg', title: 'Slide 3', açıklama: 'Açıklama', link: 'http: // web'}); example_slider.start (); }); </ script> 

Örnek HTML özelleştirme

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example4') fws2 (.); example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% title% </a> </ h1>' descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% art% </ span> </ p>', linktext: 'Devamını oku', linkHTML: '<a href="%link%">% linktext%% title% </a> hakkında' }); example_slider .addSlide ({image: 'img / slide_1.jpg', title: 'Slide 1', açıklama: 'Açıklama', link: 'http: // web'}) .addSlide ({image: 'img / slide_2.jpg', title: 'Slide 2', açıklama: 'Açıklama', link: 'http: // web'}) .addSlide ({image: 'img / slide_3.jpg', title: 'Slide 3', açıklama: 'Açıklama', link: 'http: // web'}) .start (); }); </ script> 

Güncel kal!

Bizi takip Facebook ya da Twitter ve öğe güncellemeleri ve yaklaşan eklentileri ve komut hakkında en son haberleri almak!

Ayrıca bizi takip edebilirsiniz Instagram bizim eklentileri ve komut yükleme video öğreticiler ile YouTube'da yakında ve!

Değişiklik

8 Aralık 2015

- Javascript kodu yeniden yazılmıştır.
- Imagesloaded.js komut artık isteğe bağlıdır.
- HTML kaldırıldı. Artık tamamen javascript inşa edilir.
- Artık kullanıldığı gibi Google yazı bağlantı kafası kaldırılır.
- Sürgü şimdi) ($ (seçici) kullanarak.fws2 başlatıldı;

- Yeni Yöntemler:

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

- Yeni seçenekleri:

 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

10 Nisan 2014

- Slider şimdi sayfadaki birden çok örneğini destekler.
- Kurşunlar navigasyon eklendi.
- Ok / Mermiler navigasyon şimdi ON / OFF açılabilir.
- İmleç ile üzerine gelindiğinde autoslide durağı devre dışı bırakma seçeneği eklendi.
- Slider şimdi font-korku yerine navigasyon oklar ve mermi için görüntülerin kullanır.
- Added Klavye / sağ ok navigasyon bıraktı.


Indir
Bu kategorideki diğer bileşenleriBu yazarın tüm bileşenleri
YorumlarSıkça sorulan sorular ve cevapları

Özellikleri

Oluşturuldu:
16 Kasım 12

Son Güncelleme:
8 Aralık 15

Yüksek çözünürlük:
Evet

Uyumlu Tarayıcılar:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Dosyalar Dahil:
JavaScript JS, HTML, CSS

Yazılım versiyonu:
jQuery

Anahtar kelimeler

eTicaret, eTicaret, Bü, tü, n eşyalar, tam, javascript, jQuery, js, duyarlı, kaydırıcı, Slayt gö, sterisi, genişlik