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: // сайт'}) .Начало(); }); </ скрипт> 

Пример использования функции обратного вызова

 <тип сценария = "текст / 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: // сайт'}) .Начало(); }); </ скрипт> 

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

Следуйте за нами на 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, отзывчивый, ползунок, слайд-шоу, ширина