Адаптивный слайдер с небольшим весом минифицированных файлов. Заявлена поддержка всех десктопных и мобильных браузеров. SEO совместимый.

HTML

Данный плагин SEO совместимый, поэтому используется неупорядоченный список для формирования слайдов.

Пример разметки:

<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>

Если вам необходимо, то на одной странице можно отображать несколько слайдеров.

 

Каждое изображение должно быть помещено в тег <li>. По умолчанию это же изображение будет использоваться и в списке для отображения текущего активного элемента.

Alt атрибут - определяет заголовок изображения, и используется для отображения надписи над изображением.

Дополнительные атрибуты:

data-description - Этот параметр добавляет новую строчку с текстом под заголовок выбранного элемента.

data-large-src - Если вы хотите загружать в список миниатюры картинок, а при выборе элемента отображать большую картинку, то в этот атрибут нужно добавить путь до большого изображения, а в теге img указать путь до миниатюры.

 

Для отображения заголовка над изображением вы можете использовать атрибут Alt, но для SEO может потребоваться видеть этот заголовок вне тега <img>, и для этого можно добавить тег <span> с текстом заголовка (см. пример html разметки).

 

Если необходимо создать ссылку для изображения, то можно просто обернуть тег <img> (вместе с тегом span). Ссылка будет кликабельна только на большом изображений, а не в списке.

JS

Подключаем библиотеку jQuery и инициализируем плагин:

<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
});

ИМХО

Слайдер конечно легкий и есть минимальный набор возможностей, но адаптивность не доведена до идеала. Например, в списке справа, если вставлять много больше картинок, то никакого вертикального скроллера не предусмотрено.

А когда слайдер переходит в мобильный режим и список переносится под картинку, то также не хватает либо карусели, либо горизонтального скроллера.

Если кому данные нюансы не принципиальны или есть возможность их исправить, то скачивайте и пользуйтесь.

СКАЧАТЬСкачек: 889
736,73 Kb
Кто скачал?

ДЕМОПосмотреть
пример
jQuery
  • Перевод: Игорь
npm install npm install pgwslider