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

— Tambah-On untuk WorldWideScripts.net

Melanggan suapan kami untuk kekal sehingga tarikh!

Baru! Ikut kami yang anda mahu!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Lebar penuh Slider 2 mudah untuk menggunakan jQuery image slider dioptimumkan untuk lebar skrin penuh.

ciri-ciri

- JQuery didorong.
- Reka bentuk responsif.
- Kelajuan peralihan boleh laras.
- Gambar kereta dengan jeda di hover.
- Sesuai dengan semua pelayar utama (IE8 ke atas, Chrome, Firefox, Safari dan Opera)
- Boleh menambah Tajuk, Penerangan dan butang Pautan ke setiap slaid.

Kaedah baru:

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

Pilihan baru:

 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

Contoh dengan semua tetapan:

 <script type = "text / javascript"> $ (dokumen).ready (function () { // Buat slider contoh baru var my_slider = $ ('. contoh') fws2 ().; Tetapan slider // Set (pilihan) Anda boleh benar-benar mengabaikan blok ini my_slider.settings ({ cs: 0, // slaid Semasa; 0 - pertama, 1 - kedua lain-lain... jangka masa: 750, // Tempoh slaid; milisaat hoverpause: 1, // Jeda pada hover; 1 - Ya, 0 - Tiada berhenti seketika: 6000, // Jeda sebelum pergi ke slaid seterusnya; milisaat anak panah: 1, // anak panah paparan; 1 - Ya, 0 - Tiada peluru: 0, // peluru paparan; 1 - Ya, 0 - Tiada expandDuration: 750, // anak panah paparan; 1 - Ya, 0 - Tiada linktext: 'Read More', // Button Teks (tetapan Global) // Pilihan lanjutan titleHTML: '<h4>% title% </ h4>', // Custom HTML untuk Tajuk descriptionHTML: '<p>% desc% </ p>', // Custom HTML untuk Description linkHTML: '<a href="%link%">% linktext% </a>', // Custom HTML untuk butang link beforeInit: fungsi () {}, // Fungsi untuk berjalan sebelum slider init afterInit: fungsi () {}, // Fungsi untuk menjalankan selepas slider init slideStart: Fungsi (slaid) {}, // Fungsi untuk berjalan pada slaid permulaan, kembali objek slaid slideEnd: Fungsi (slaid) {} ​​Fungsi // dijalankan pada akhir slaid, mengembalikan objek slaid }); // Menambah slaid my_slider.addSlide ({ image: 'img / slide_1.jpg', // Sumber imej tajuk: 'Slide 1', // Tajuk description: 'Penerangan', // Slide Penerangan linktext: '', // Button Teks (Pilihan, akan menggunakan tetapan global sebaliknya) pautan: 'http: // laman web' // Baca URL link Lebih }); // Mula gelangsar my_slider.start (); }); </ script> 

Contoh singkat tanpa berubah-ubah, dengan menggunakan chaining:

 <script type = "text / javascript"> $ (dokumen).ready (function () { $ ('. Contoh 1') .fws2 ({peluru: 1, anak panah: 0}) .addSlide ({image: 'img / slide_1.jpg', tajuk: 'Slide 1', description: 'Penerangan', pautan: 'http: // laman web'}) .addSlide ({image: 'img / slide_2.jpg', tajuk: 'Slide 2', description: 'Penerangan', pautan: 'http: // laman web'}) .addSlide ({image: 'img / slide_3.jpg', tajuk: 'Slide 3', description: 'Penerangan', pautan: 'http: // laman web'}) .start (); }); </ script> 

Contoh menggunakan fungsi panggil balik

 <script type = "text / javascript"> $ (dokumen).ready (function () { var example_slider = $ ('. example2') fws2 ().; example_slider.settings ({ afterInit: fungsi () { amaran ('Slider bersedia!'); }, slideEnd: Fungsi (slaid) { var title = slide.find ("title.") teks ().; amaran ('Ini adalah' + judul); } }); example_slider.addSlide ({image: 'img / slide_1.jpg', tajuk: 'Slide 1', description: 'Penerangan', pautan: 'http: // laman web'}); example_slider.addSlide ({image: 'img / slide_2.jpg', tajuk: 'Slide 2', description: 'Penerangan', pautan: 'http: // laman web'}); example_slider.addSlide ({image: 'img / slide_3.jpg', tajuk: 'Slide 3', description: 'Penerangan', pautan: 'http: // laman web'}); example_slider.start (); }); </ script> 

Contoh menyesuaikan HTML

 <script type = "text / javascript"> $ (dokumen).ready (function () { var example_slider = $ ('. example4') fws2 ().; example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% tajuk% </a> </ h1>', descriptionHTML: '<p> <i class = "fa fa-menyemak" /> <span>% desc% </ span> </ p>', linktext: 'Baca lebih lanjut, linkHTML: '<a href="%link%">%% linktext tentang tajuk%% </a>' }); example_slider .addSlide ({image: 'img / slide_1.jpg', tajuk: 'Slide 1', description: 'Penerangan', pautan: 'http: // laman web'}) .addSlide ({image: 'img / slide_2.jpg', tajuk: 'Slide 2', description: 'Penerangan', pautan: 'http: // laman web'}) .addSlide ({image: 'img / slide_3.jpg', tajuk: 'Slide 3', description: 'Penerangan', pautan: 'http: // laman web'}) .start (); }); </ script> 

Kekal sehingga tarikh!

Mengikuti kami di Facebook atau Twitter dan dapatkan berita terkini mengenai kemas kini item dan plugin yang akan datang dan skrip!

Anda juga boleh mengikuti kami di Instagram dan tidak lama lagi di YouTube dengan tutorial video mengenai cara untuk memasang plugin dan skrip kami!

Changelog

8 Disember, 2015

- Kod Javascript telah ditulis semula.
- Skrip imagesloaded.js kini pilihan.
- HTML telah dikeluarkan. Ia benar-benar telah membina dari javascript.
- Pautan font Google dikeluarkan dari kepala kerana ia tidak lagi digunakan.
- Slider kini dimulakan dengan menggunakan $ (pemilih).fws2 ();

- Kaedah baru:

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

- Pilihan Baru:

 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

April 10, 2014

- Slider kini menyokong beberapa contoh pada halaman.
- Ditambah peluru navigasi.
- Panah / Peluru pandu arah boleh bertukar ON / OFF sekarang.
- Ditambah pilihan untuk mematikan stop autoslide pada mouseover.
- Slider kini menggunakan font-hebat dan bukannya imej untuk anak panah navigasi dan peluru.
- Keyboard Ditambah ke kiri / kanan panah navigasi.


Memuat turun
Komponen-komponen lain dalam kategori iniSemua komponen pengarang ini
KomenSoalan-soalan lazim dan jawapan

Properties

Dibuat:
16 November 12

Kemaskini:
8 Dis 15

Resolusi tinggi:
Ya

Pelayar Sesuai:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Fail Termasuk:
JavaScript JS, HTML, CSS

Perisian Versi:
jQuery

Kata kunci

eCommerce, eCommerce, Semua Produk, penuh, javascript, jquery, js, responsif, slider, tayangan slaid, lebar