Адаптивный слайдер для сайта — PgwSlider

PgwSlider — простенький адаптивный слайдер изображений\\новостей для сайта основанный на jQuery.

Так слайдер выглядит на мобильных разрешениях экрана:

Адаптивный слайдер для сайта - PgwSlider

Как реализовать:

1. Разметка html

2. Подключаем javascript и jQuery

Список опций:
mainClassName

Тип: string
По умолчанию: \’pgwSlider
Перезаписывает дефолтный CSS класс у слайдера.

listPosition

Тип: String
По умолчанию: \’right\’
Позиция списка миниатюр. Доступно \’left\’ или \’right\’. Если хотите отключить этот список, то смотрите опцию \»displayList\» ниже.

selectionMode

Тип: String
По умолчанию: \’click\’
Режим переключения слайдов, либо по клику \’click\’, либо \»mouseOver\» (наведение курсора). \»mouseOver\» работает только в режиме \»fading\», используемым для смены слайдов.

transitionEffect

Тип: String
По умолчанию: \’fading\’
Можно выбрать один из двух эффектов перехода: \’fading\’ или \’sliding\’

autoSlide

Тип: Boolean
По умолчанию: true
Включение и отключение автоматического показа слайдшоу

displayList

Тип: Boolean
По умолчанию: true
Включение или отключение списка с миниатюрами, положение списка определяется в опции listPosition

displayControls

Тип: Boolean
По умолчанию: false
Включение и отключение навигации по слайдеру.

touchControls

Тип: Boolean
По умолчанию: true
Включение поддержки тач событий для смены слайдов.

verticalCentering

Тип: Boolean
По умолчанию: false
Если высота списка или главного контейнера меньше, чем высота изображения, то этот параметр может вертикально центрировать элемент. Для включения: true

adaptiveHeight

Тип: Boolean
По умолчанию: false
Если ваши изображения различной высоты, то этот параметр автоматически регулирует глобальную высоту слайдера.

maxHeight

Тип: Integer
По умолчанию: null
Если вы хотите установить максимальную высоту для вашего слайдера, то можно указать количество пикселей в этом параметре, без \»px\»

beforeSlide

Тип: Function
По умолчанию: null
Эта опция может содержать функцию, которая будет вызываться перед каждым новым слайдом. Например,

afterSlide

Тип: Function
По умолчанию: null
Эта опция может содержать функцию, которая будет вызываться после каждого нового слайда. Например,

adaptiveDuration

Тип: Integer
По умолчанию: 200
Это длительность периода в миллисекундах, выполнения предыдущих опций, если они активированы.

transitionDuration

Тип: Integer
По умолчанию: 500
Время анимации в мс между двумя изображениями

intervalDuration

Тип: Integer
По умолчанию: 3000
Интервал в мс до отображения следующего изображения. Эта опция требует включения параметра autoSlide.

Информация о API
Для того, чтобы применять эти API функции, нужно присвоить слайдер переменной:

startSlide — Включение автослайдшоу

stopSlide — Отключение автослайдшоу

getCurrentSlide — Вернуть идентификатор текущего слайда

getSlideCount — Возвращает общее количество элементов слайдера

displaySlide — Отображает элемент, выбранный с помощью идентификатора.

nextSlide — Отображает следующий элемент.

previousSlide — Отображает предыдущий элемент.

destroy — Разрушает слайдер. Если передается параметр \»true\», контейнер будет только скрыт для возможной перезагрузки.

reload — Перезапускает слайдер с новыми параметрами конфигурации.
Например:

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.