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

— Add-On ke WorldWideScripts.net

@id1wwsBerlangganan feed kami untuk tetap up to date!

Baru ! Ikuti kami seperti yang Anda inginkan!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Penuh Lebar Slider 2 mudah digunakan jQuery slider gambar dioptimalkan untuk layar lebar penuh.

fitur

- JQuery didorong.
- Desain responsif.
- Adjustable kecepatan transisi.
- Auto slideshow dengan jeda di hover.
- Kompatibel dengan semua browser utama (IE8 dan di atas, Chrome, Firefox, Safari dan Opera)
- Dapat menambahkan Judul, Deskripsi dan tombol Link ke setiap slide.

Metode 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

Misalnya dengan semua pengaturan:

 <script type = "text / javascript"> $ (document).ready (function () { // Buat contoh slider baru var my_slider = $ ('. Misalnya') fws2 ().; Set pengaturan // slider (opsional) Anda benar-benar dapat mengabaikan blok ini my_slider.settings ({ cs: 0, // geser sekarang; 0 - pertama, 1 - kedua dll... Durasi: 750, // durasi Slide; milidetik hoverpause: 1, // Jeda di hover; 1 - Ya, 0 - Tidak ada jeda: 6000, // Jeda sebelum pergi ke slide berikutnya; milidetik panah: 1, // Tampilan panah; 1 - Ya, 0 - Tidak ada peluru: 0, // Tampilan peluru; 1 - Ya, 0 - Tidak ada expandDuration: 750, // Tampilan panah; 1 - Ya, 0 - Tidak ada linktext: 'Read More', // Tombol Text (pengaturan Global) // Opsi lanjutan titleHTML: '<h4> title%% </ h4>', // Custom HTML untuk Judul descriptionHTML: '<p>% desc% </ p>', // Custom HTML untuk Keterangan yang linkHTML: '<a href="%link%">% linktext% </a>', // Custom HTML untuk tombol link beforeInit: function () {}, // Fungsi untuk menjalankan sebelum init slider afterInit: function () {}, // Fungsi untuk menjalankan setelah init slider slideStart: fungsi (slide) {}, // Fungsi untuk berjalan pada awal slide, mengembalikan objek slide slideEnd: fungsi (slide) {} // Fungsi untuk berjalan pada akhir slide, mengembalikan objek slide }); // Menambahkan Slide my_slider.addSlide ({ image: 'img / slide_1.jpg', // sumber Gambar Judul: 'Slide 1', // Judul deskripsi: 'Keterangan', // Deskripsi Slide linktext: '', // Tombol Text (Opsional, akan menggunakan pengaturan global sebaliknya) link: 'http: // situs' // Read More URL link }); // Mulai slider my_slider.start (); }); </ script> 

Contoh singkat tanpa variabel, menggunakan chaining:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({peluru: 1, panah: 0}) .addSlide ({image: 'img / slide_1.jpg', judul: 'Slide 1', deskripsi: 'Keterangan', link: 'http: // situs'}) .addSlide ({image: 'img / slide_2.jpg', judul: 'Slide 2', deskripsi: 'Keterangan', link: 'http: // situs'}) .addSlide ({image: 'img / slide_3.jpg', judul: 'Slide 3', deskripsi: 'Keterangan', link: 'http: // situs'}) .mulai(); }); </ script> 

Misalnya menggunakan fungsi callback

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 ().; example_slider.settings ({ afterInit: function () { alert ('Slider siap!'); }, slideEnd: fungsi (slide) { var title = slide.find ("title.") text ().; alert ('Ini adalah' + judul); } }); example_slider.addSlide ({image: 'img / slide_1.jpg', judul: 'Slide 1', deskripsi: 'Keterangan', link: 'http: // situs'}); example_slider.addSlide ({image: 'img / slide_2.jpg', judul: 'Slide 2', deskripsi: 'Keterangan', link: 'http: // situs'}); example_slider.addSlide ({image: 'img / slide_3.jpg', judul: 'Slide 3', deskripsi: 'Keterangan', link: 'http: // situs'}); example_slider.start (); }); </ script> 

Misalnya menyesuaikan HTML

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. Example4dalam') fws2 ().; example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% title% </a> </ h1>', descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% desc% </ span> </ p>', linktext: 'Read more', linkHTML: '<a href="%link%">% linktext% tentang judul%% </a>' }); example_slider .addSlide ({image: 'img / slide_1.jpg', judul: 'Slide 1', deskripsi: 'Keterangan', link: 'http: // situs'}) .addSlide ({image: 'img / slide_2.jpg', judul: 'Slide 2', deskripsi: 'Keterangan', link: 'http: // situs'}) .addSlide ({image: 'img / slide_3.jpg', judul: 'Slide 3', deskripsi: 'Keterangan', link: 'http: // situs'}) .mulai(); }); </ script> 

Tetap terkini!

Ikuti kami di Facebook atau Twitter dan mendapatkan berita terbaru tentang update barang dan plugin yang akan datang dan script!

Anda juga dapat mengikuti kami di Instagram dan segera di YouTube dengan video tutorial tentang cara menginstal plugin dan skrip kami!

Changelog

8 Desember 2015

- Kode Javascript telah ditulis ulang.
- Naskah imagesloaded.js sekarang opsional.
- HTML telah dihapus. Hal ini sekarang benar-benar membangun dari javascript.
- Link Font Google akan dihapus dari kepala karena tidak lagi digunakan.
- Slider sekarang diinisialisasi dengan menggunakan $ (selector).fws2 ();

- Metode 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 sekarang mendukung beberapa contoh pada halaman.
- Ditambahkan peluru navigasi.
- Panah / Peluru navigasi dapat berubah ON / OFF sekarang.
- Ditambahkan pilihan untuk menonaktifkan autoslide berhenti di mouseover.
- Slider sekarang menggunakan font-mengagumkan bukan gambar untuk panah navigasi dan peluru.
- Ditambahkan Keyboard kiri / kanan panah navigasi.


Ambil
Komponen lain dalam kategori iniSemua komponen penulis ini
KomentarPertanyaan yang sering diajukan dan jawaban

Properties

Dibuat:
16 November 12

Pembaharuan Terakhir:
8 15 Desember

Resolusi tinggi:
iya nih

Browser kompatibel:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Termasuk file:
JavaScript JS, HTML, CSS

Versi perangkat lunak:
jQuery

Kata kunci

eCommerce, eCommerce, Semua barang, penuh, javascript, jquery, js, responsif, slider, slideshow, lebar