Как добавить простой слайдер на свой сайт. Плагин Fotorama

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

Данный плагин называется Fotorama

Демо

Ссылка на плагин — http://fotorama.io

Подключение плагина

Для работы плагина необходимо подключить jQuery и сам плагин.

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

Создание слайдера

Слайдер создается очень просто. Во внутрь элемента с классом fotorama добавляются изображения.

<div class="fotorama" data-nav="thumbs">
    <img src="a.png">
    <img src="Screenshot_1.png">
    <img src="Screenshot_2.png">
</div>

В принципе этого достаточно для того чтобы слайдер работал. Теперь давайте разберем дополнительные параметры, которые улучшат ваш слайдер.

Размер слайдера

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

data-width — ширина слайдера
data-height — высота слайдера
data-maxwidth — максимальная ширина
data-maxheight — максимальная высота

Размер задается в пикселях или в процентах, если поставить знак процентов

<div class="fotorama" data-width="100" data-height="100%">
    <img src="a.png">
    <img src="Screenshot_1.png">
    <img src="Screenshot_2.png">
</div> 

Замена флажков на переключатели в виде изображений

По стандарту слайдер переключается по флажкам, которые находятся под изображением. Чтобы эти флажки заменить на изображения из слайдера, нужно прописать дополнительный атрибут со значением data-nav="thumbs"

<div class="fotorama" data-nav="thumbs">
    <img src="a.png">
    <img src="Screenshot_1.png">
    <img src="Screenshot_2.png">
</div> 

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

Видео

Данный плагин позволяет за место изображений ставить видео ролики. Для этого пропишите следующий код.

<div class="fotorama">   
   <a href="http://youtube.com/watch?v=C3lWwBslWqg">Desert Rose</a>   
   <a href="http://vimeo.com/61527416">Celestial Dynamics</a> 
</div> 

HTML

Так же вы можете размещать HTML элементы вместо обычных изображений.

<div class="fotorama">   
<div style="background: pink;color: #fff; text-align:center; margin: auto; height: 300px; font-size: 30px;">One</div>
<div style="background: red;color: #fff; text-align:center; margin: auto; height: 300px; font-size: 30px;">Two</div>  
<div style="background: blue;color: #fff; text-align:center; margin: auto; height: 300px; font-size: 30px;">Three</div> 
</div> 

Переходы

Вы можете изменить эффекты во время переходов. Для этого нужно добавить дополнительный атрибут data-transition="".

Есть 3 вида переходов. Для того чтобы изменить эффекты перехода, нужно прописать соответствующее значение в атрибут.

crossfade — вспышка
slide — слайды
dissolve  — без эффектов

Добавление подписей

<div class="fotorama">   
    <img src="http://prog-time.ru/wp-content/uploads/2019/01/Parsing-php-parsing-izobrazhenij.jpg" data-caption="Первое фото">   
    <img src="http://prog-time.ru/wp-content/uploads/2019/01/Parsing-php-file_get_contents.jpg" data-caption="Второе фото"> 
</div> 

Повтор

По стандарту слайдеры доходят до последнего изображения и останавливаются. Есть специальный атрибут который запускает просмотр заново — data-loop="true"

Автозапуск

Вы можете указать, чтобы слайдер листался автоматически через указанный промежуток времени. Атрибут data-loop="true" , по мимо значения true , вы можете указать конкретное время в миллисекундах.

<div class="fotorama" data-loop="true">   
   <img src="1.jpg">   
   <img src="2.jpg"> 
</div> 

Переключение слайдов клавиатурой

Вы можете прописать атрибут, который позволяет листать слайды кнопками на клавиатуре. Для этого можно использовать кнопки-стрелки.
http://fotorama.io/customize/keyboard/

<div class="fotorama" data-keyboard="true" >   
    <img src="http://prog-time.ru/wp-content/uploads/2019/01/Parsing-php-parsing-izobrazhenij.jpg" data-caption="Первое фото">   
    <img src="http://prog-time.ru/wp-content/uploads/2019/01/Parsing-php-file_get_contents.jpg" data-caption="Второе фото"> 
</div>

Способы переключения

Вы можете настроить переключения с помощью стрелок, нажатия на изображение, свайпом изображения или комбинируя все способы. Для каждого нужно прописать свой атрибут.

data-arrows="true" — переключения с помощь стрелок
data-click="true" — переключение с помощью нажатия на изображение
data-swipe="true" — переключение свайпом(перетаскиванием изображения вправо и влево)

<div class="fotorama" data-arrows="true" data-click="true" data-swipe="true">   
   <img src="1.jpg">   
   <img src="2.jpg"> 
</div> 

Расположение навигации

<div class="fotorama" data-navposition="top">   
   <img src="1.jpg">   
   <img src="2.jpg"> 
</div> 

Полный список всех настроек вы можете посмотреть здесь — http://fotorama.io/customize/options/