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

Підпишіться на наш канал, щоб залишатися в курсі подій!

Новинка! Слідуйте за нами, як ви хочете!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Повний Ширина слайдер 2 проста у використанні JQuery слайдер зображення, оптимізований для повної ширини екрана.

Риси

- Приводом JQuery.
- Чуйний дизайн.
- Регульована швидкість переходу.
- Авто слайд-шоу з паузою на режимі висіння.
- Сумісність з усіма основними браузерами (IE8 і вище, Chrome, Firefox, Safari і Opera)
- Можна додати назву, опис і кнопку Link для кожного слайда.

Нові методи:

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

Приклад з усіма параметрами:

 <тип сценарію = "текст / JavaScript"> $ (Документ).ready (функція () { // Створити новий екземпляр слайдер вар my_slider = $ ('. Приклад ") fws2 (). // Налаштування параметрів повзунок (опціонально) Ви можете повністю ігнорувати цей блок my_slider.settings ({ CS: 0, // Поточний слайд; 0 - по-перше, 1 - по-друге і т.д.... Тривалість: 750, // Тривалість Презентація; мілісекунди hoverpause: 1, // Пауза при наведенні; 1 - Так, 0 - Ні пауза: 6000, // паузу перед перейти до наступного слайда; мілісекунди стрілки: 1, // Показати стрілки; 1 - Так, 0 - Ні кулі: 0, // Показати кулі; 1 - Так, 0 - Ні expandDuration: 750, // Показати стрілки; 1 - Так, 0 - Ні linktext: «Докладніше», // Кнопка Text (глобальний параметр) // Розширені опції titleHTML: «<h4>% назву% </ h4> ', // Особливий HTML для Тема descriptionHTML: '<р>% спаданням% </ P>', // Особливий HTML для опису linkHTML: «<a href="%link%">% linktext% </a> ', для кнопки // Особливий HTML посилання beforeInit: функція () {} // Функція виконується до ініціалізації слайдер afterInit: функція () {} // Функція для запуску після слайдера ініціалізації slideStart: функція (слайд) {} // Функція для запуску на старті слайд, повертає об'єкт слайд slideEnd: функція (слайд) {} // Функція для запуску на кінець слайд, повертає об'єкт слайд }); // Додавання слайд- my_slider.addSlide ({ Зображення: «IMG / slide_1.jpg ', // Джерело зображення Назва: "Презентація 1 ', // Тема Опис: "Опис", // Опис Презентація linktext: '', // Кнопка Текст (опція, буде використовувати глобальні налаштування інше) посилання: 'HTTP: // сайт "// Детальніше посилання URL }); // Запуск повзунок my_slider.start (); }); </ Скрипт> 

Короткий приклад без змінної, використовуючи ланцюжка:

 <тип сценарію = "текст / JavaScript"> $ (Документ).ready (функція () { $ ('. Example1') .fws2 ({кулі: 1, стрілки: 0}) .addSlide ({зображення: «IMG / slide_1.jpg", назва: "Презентація 1", опис: "Опис", посилання: 'HTTP: // сайт'}) .addSlide ({зображення: «IMG / slide_2.jpg", назва: "Слайд 2", опис: "Опис", посилання: 'HTTP: // сайт'}) .addSlide ({зображення: «IMG / slide_3.jpg", назва: "Слайд 3", опис: "Опис", посилання: 'HTTP: // сайт'}) .start (); }); </ Скрипт> 

Приклад використання функції зворотного виклику

 <тип сценарію = "текст / JavaScript"> $ (Документ).ready (функція () { вар example_slider = $ ('. example2') fws2 (). example_slider.settings ({ afterInit: функція () { оповіщення ('слайдер готовий!'); }, slideEnd: функція (слайд) { вар назва = 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

 <тип сценарію = "текст / JavaScript"> $ (Документ).ready (функція () { вар example_slider = $ ('. Example4') fws2 (). example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% назву% </a> </ h1>', descriptionHTML: "<P> <I Клас =" фа фа перевірити "/> <SPAN>% спаданням% </ SPAN> </ P> ', linktext: «Докладніше», linkHTML: «<a href="%link%">% linktext% о% TITLE% </a>" }); example_slider .addSlide ({зображення: «IMG / slide_1.jpg", назва: "Презентація 1", опис: "Опис", посилання: 'HTTP: // сайт'}) .addSlide ({зображення: «IMG / slide_2.jpg", назва: "Слайд 2", опис: "Опис", посилання: 'HTTP: // сайт'}) .addSlide ({зображення: «IMG / slide_3.jpg", назва: "Слайд 3", опис: "Опис", посилання: 'HTTP: // сайт'}) .start (); }); </ Скрипт> 

Будьте в курсі!

Слідуйте за нами на Facebook або Twitter і отримати останні новини про оновлення пункт і майбутніх плагінів і скриптів!

Ви також можете слідувати за нами на Instagram і найближчим часом на YouTube з відео-уроки про те, як встановити наші плагіни і скрипти!

Список змін

8 грудня 2015

- Сміття код був переписаний.
- 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

10 квітня 2014

- Слайдер тепер підтримує кілька примірників на сторінці.
- Додана навігація кулі.
- Стрілка / навігація Кулі можуть бути включено / вимкнено в даний час.
- Додана опція для відключення autoslide зупинку при наведенні курсору миші.
- Слайдер тепер використовує шрифт-дивним замість зображень для навігації стрілками і куль.
- Додана клавіатура вліво / вправо стрілки навігації.


Завантажити
Інші компоненти в цій категоріїВсі компоненти цього автора
КоментаріЧасті питання та відповіді

Властивості

Створений:
16 листопада 12

Останнє оновлення:
8 грудня 15

Висока роздільна здатність:
Так

Сумісні Браузери:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Файли, включені:
JavaScript JS, HTML, CSS

Версія:
JQuery

Ключові слова

електронної комерції, електронної комерції, Всі товари, повний, Javascript, JQuery, JS, чуйний, повзунок, слайд-шоу, ширина