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

Headline Slider

— Tambah-On untuk WorldWideScripts.net

Melanggan suapan kami untuk kekal sehingga tarikh!

Baru! Ikut kami yang anda mahu!


Headline Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Headline Slider adalah slider jQuery untuk memaparkan apa yang anda fikir adalah penting untuk laman web anda.

ciri-ciri

- JQuery didorong.
- Reka bentuk responsif.
- Mesra Mobile.
- Lebar laras dan ketinggian.
- Auto tayangan slaid dengan jeda pada hover untuk imej yang dipaparkan.
- Boleh menambah Tajuk, Penerangan dan butang Pautan ke setiap slaid.
- Sesuai dengan semua pelayar utama.

kaedah

mula - mula slider selepas anda mempunyai slaid ditambah. contoh:

 . Var my_slider = $ ( '. My-pemegang tempat-div') hlslider (); ... ... my_slider.start (); 

memusnahkan - membuang gelangsar

 . Var my_slider = $ ( '. My-pemegang tempat-div') hlslider (); ... ... my_slider.destroy (); 
addSlideContainer - menambah besar bekas slaid dipaparkan. contoh:

 // Contoh ini menambah dipaparkan bekas dengan 2 imej dalam my_slider.addSlideContainer ([ // Bekas slaid 1 { image: 'img / image1.jpg', // src Image title: 'Slide Title 1', // Tajuk description: 'Penerangan untuk Slide 1', // Slide Penerangan pautan: 'http://mywebsite.com' // Read More link URL }, // Slaid bekas 2 { image: 'img / image2.jpg', // src Image title: 'Slide Title 2', // Tajuk description: 'Penerangan untuk Slide 2', // Slide Penerangan pautan: 'http://mywebsite.com' // Read More link URL } ]); 

addSlide - menambah slaid blok kecil. contoh:

 // Tambah slaid kecil my_slider.addSlide ({ image: 'img / image3.jpg', // src Image title: 'Slide Title 3', // Tajuk description: 'Penerangan untuk Slide 3', // Slide Penerangan pautan: 'http://mywebsite.com' // Read More link URL }); 

Memaparkan slider dengan semua tetapan:

<Script type = "text / javascript"> </ script>

$(document).ready(function () { 
 / * * Create slider instance 
 var my_slider = $('.my-placeholder-div').hlslider(); 
 // where ".my-placeholder-div" is for example // this way the slider will be build inside this wrapper 
 / * Slider settings (optional step) 
 my_slider.settings({ 
 height: "360px", // Slider Height width: "800px", // Slider Width (NOTE Max-Width is set to 100%) 
 // Big (featured) slide settings bigSlide: { charLimit: 0, // characters limit, 0 - disabled autoSlide: 1, // auto slide inner images (1 - ON, 0 - OFF) duration: 5000, // auto slide image duration in milliseconds maxWidth: '80%', // big slide container max width in percents minWidth: '300px' // big slide container min width in pixels }, 
 // Small slide settings smallSlide: { charLimit: 200, // characters limit, 0 - disabled maxWidth: '35%', // small slide max width in percents minWidth: '250px' // small slide min width in pixels }, 
 aTarget: '_SELF' // link on click target (_BLANK, _SELF). _BLANK opens in new window, _SELF opens in same window 
 }); 
 / * Adding slides 
 // Add Big (featured) container my_slider.addSlideContainer([ 
 // container slide 1 { image: 'img/image1.jpg', // Image src title: 'Slide Title 1', // Title description: 'Description for Slide 1', // Slide Description link: ' http://mywebsite.com' // Read More URL link }, 
 // container slide 2 { image: 'img/image2.jpg', // Image src title: 'Slide Title 2', // Title description: 'Description for Slide 2', // Slide Description link: ' http://mywebsite.com' // Read More URL link } 
 ]); 
 // Add small slide my_slider.addSlide({ image: 'img/image3.jpg', // Image src title: 'Slide Title 3', // Title description: 'Description for Slide 3', // Slide Description link: ' http://mywebsite.com' // Read More URL link }); 
 / * Run the slider * 
 my_slider.start(); 
 }); 

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

Properties

dicipta:
19 April 16

Kemaskini terakhir:
19 April 16

Pelayar Sesuai:
IE10, IE11, Firefox, Safari, Opera, Chrome, Edge

fail Termasuk:
JavaScript JS, HTML, CSS, kurang

Versi perisian:
jQuery

Kata kunci

eCommerce, eCommerce, semua Item, disesuaikan, penuh, tajuk, javascript, jquery, js, responsif, gelongsor, slider, tayangan slaid, lebar