fotorama слайдер для сайта

Как добавить простой слайдер на свой сайт. Плагин 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/

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о