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

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

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

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

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

1. Разметка html

<ul class="pgwSlider">
<li><img src="images/slide-1.jpg" alt="Заголовок из alt атрибута" data-description="Подзаголовок дополнительного описания"></li>
<li><img src="images/slide-2.jpg" alt="Заголовок из alt атрибута" data-large-src="images/slide-2.jpg"></li>
<li>
<img src="images/slide-3.jpg" alt="">
<span>Заголовок из тега span</span>
</li>
<li>
<a href="http://google.com" target="_blank">
<img src="images/slide-4.jpg" data-description="Этот слайд кликабельный, со ссылкой." alt="">
<span>Заголовок из тега span</span>
</a>
</li>
</ul>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});
</script>

Список опций:
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
Эта опция может содержать функцию, которая будет вызываться перед каждым новым слайдом. Например,

function() { console.log('before'); }

afterSlide

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

function() { console.log('after'); }

adaptiveDuration

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

transitionDuration

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

intervalDuration

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

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

var pgwSlider = $('.pgwSlider').pgwSlider();

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

pgwSlider.startSlide();

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

pgwSlider.stopSlide();

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

pgwSlider.getCurrentSlide();

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

pgwSlider.getSlideCount();

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

pgwSlider.displaySlide(3);

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

pgwSlider.nextSlide()

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

pgwSlider.previousSlide();

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

pgwSlider.destroy();

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

pgwSlider.reload({
    maxHeight : 300,
    intervalDuration : 4000
});

delux

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

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

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

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

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