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

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

avatar
39 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
33 Авторы комментариев
AndrewBogAndrewBogMurrayVumMurrayVumMurrayVum Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

Buy Amoxicillin Without Rx [url=http://apcialisle.com/#]Buy Cialis[/url] Levitra Why So Exspensive Cialis Amoxicillin And Dacon Solution

JanleF
Гость

Viagra Dosis Precio [url=http://apcialisle.com/#]canadian pharmacy cialis 20mg[/url] Fast Cialis By Mail Cialis buy accutane online legit

StepFoush
Гость

Mexican Pharmacy Online [url=https://apcialisle.com/#]cialis for sale[/url] Viagra Con Cerveza cialis canada Acheter Viagra Ligne

JanleF
Гость

Buy Mirapex No Prescription [url=https://apcialisle.com/#]buy cialis and viagra online[/url] Propecia Terciario buy generic cialis online cheap Free Shipping Clobetasol For Sale Discount Shop

JanleF
Гость

Us Pharmacy Cialis [url=https://buyciallisonline.com/#]Cialis[/url] Zyban Without A Prescription cialis online cheap Fluoxetine 60mg For Sale Medicine

JanleF
Гость

Jenerik Priligy [url=https://buyciallisonline.com/#]Cialis[/url] Cialis 20 Mg Foglietto Illustrativo Cialis Zithromax With Alcohol Consumption

Bupbaipt
Гость
Bupbaipt

buy viagra through paypal painkillers online with next day delivery buy cialis online with a prescription

Bupbaipt
Гость
Bupbaipt

cheapest cialis uk http://tadmedz.com generic for cialis

JanleF
Гость

Wirkung Cialis Vs Viagra [url=https://abcialisnews.com/#]generic cialis cost[/url] Cialis Forum Panorama cialis generic best price Silvitra

Bupbaipt
Гость
Bupbaipt

cheap cialis drug buy generic cialis cialis pills men

Arturojep
Гость
Arturojep

buy cheap viagra generic online viagra online without prescription order levitra from canada

JimmyGoori
Гость
JimmyGoori

cialis buy us viagra without a doctor prescription usa cheapest viagra super active

JanleF
Гость

Vpxlgenericindia [url=https://abuycialisb.com/#]buying generic cialis online safe[/url] Cialis Generic Without A Prescription Buy Cialis Buy Fluconazole

Harryraw
Гость
Harryraw

cialis buy from canada http://alexa24ph.com – viagra without a doctor prescription where can i buy viagra yahoo

Harryraw
Гость
Harryraw

buy cialis thailand http://aralenph.com – buy chloroquine online cialis discount code

Harryraw
Гость
Harryraw

cialis coupon cvs http://zithazi.com – zithromax price buy cialis tablets

BradleyAnync
Гость
BradleyAnync

can you buy levitra walmart
buy viagra

BradleyAnync
Гость
BradleyAnync

viagra sale cheapest
viagra online

BradleyAnync
Гость
BradleyAnync

generic cialis india
viagra pills

BradleyAnync
Гость
BradleyAnync

buy 40 mg levitra
viagra

BradleyAnync
Гость
BradleyAnync

order cialis paypal
viagra

BradleyAnync
Гость
BradleyAnync

how to buy cialis in toronto
sildenafil

BradleyAnync
Гость
BradleyAnync

buy viagra online safe
cheap viagra

BradleyAnync
Гость
BradleyAnync

viagra pills
viagra alternatives

MathewDaups
Гость
MathewDaups

warnings for cialis
http://cialisxtl.com/ generic cialis at walgreens pharmacy

MathewDaups
Гость
MathewDaups

generic cialis tadalafil
http://cialisxtl.com/ cialis 20 mg

AndrewCig
Гость
AndrewCig

viagra without doctor prescription https://sildenafilprof.com
best place buy generic levitra

AndrewCig
Гость
AndrewCig

generic viagra https://sildenafilprof.com
buy cheap cialis in canada

Robertorell
Гость
Robertorell

how does cialis work samples of cialis

Robertorell
Гость
Robertorell

cialis prices cialis in canada

RichardHap
Гость
RichardHap

best price 100mg generic viagra: viagra without a doctor prescription viagra online canadian pharmacy

RichardHap
Гость
RichardHap

viagra results: directions for use of viagra cheap viagra buy uk

MurrayVum
Гость
MurrayVum

cheap pet meds without vet prescription buy cheap prescription drugs online
onlinepharmacyero.com ed meds online without prescription or membership

treantinc
Гость
treantinc

Acheter Du Kamagra En Ligne [url=https://cialibuy.com/]viagra and cialis online[/url] viagra cialis legitimate dealers Cialis Propecia Tabletten

MurrayVum
Гость
MurrayVum

prices of viagra at walmart legal to buy prescription drugs without prescription
onlinepharmacyero.com comfortis without vet prescription

MurrayVum
Гость
MurrayVum

pet meds without vet prescription real cialis without a doctor’s prescription
onlinepharmacyero.com prescription drugs online without doctor

MurrayVum
Гость
MurrayVum

tadalafil without a doctor’s prescription prescription drugs online without
onlinepharmacyero.com prescription meds without the prescriptions

AndrewBog
Гость
AndrewBog
AndrewBog
Гость
AndrewBog

side effects of cialis cialis prices