» »

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

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

Присутствие слайдера на сайте всегда особо привлекает своим стилей гостей и пользователей ресурса, плюс, если он идет в адаптивной верстке. Так как его можно корректно наблюдать и перематывать изображение на всех мобильных аппаратах. Вашему вниманию слайд, под названием Fotorama, который является не сложным плагином для фотоальбома или страницы с перемещением снимков, что безусловно поможет веб разработчику создать оригинальную и красивую галерею с присутствием красивых снимков, а также по сторонам идут стрелки для переключения слайда.

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

Проверяя его по функциональности, где вид по размерам указан в коде, что можно увидеть при открытии портала или страницы.

Слайдер на CSS для сайта

Это уже идет ближе к смартфону или планшету.

Слайдер карусель

А так будет выглядеть на мобильном экране.

Мобильный слайд

Приступаем к установке:

HTML

Код
<div class="fotorama" data-width="623" data-height="305" data-fit="cover">
  <div data-img="http://zornet.ru/_fr/56/1051103.jpg" class="any inverse">Описание</div>
  <div data-img="http://zornet.ru/_fr/56/0022290.jpg" class="any inverse"><strong>Zornet.Ru</strong></div>
  <div data-img="http://zornet.ru/_fr/56/3317342.jpg" class="any inverse"><em></em></div>
</div>

CSS

Код
.fotorama .any {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  font-family: Georgia, serif;
  font-size: 23px;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  padding-top: 100px;
  line-height: normal;
  }

.fotorama .inverse {
  color: #c1c1c1;
  text-shadow: 0 1px 0 #3a3636;
}

Подключаем на нужных страницах:

Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

Особенности:

1. Поддерживает автоматическое воспроизведение, полноэкранный режим, отзывчивость, навигацию по клавиатуре, миниатюры, транзит, события обратного вызова.
2. Поддерживает видео, изображение, html, текст.
3. Кросс-браузер.
4. Простота в использовании.

Просматривая информацию на этот материал, то нашел ресурс, который полностью посвящён этому слайдеру, где все прописано в подробностях. Это качается его характеристик, также как можно его применить и в какой области тематике, вообщем все о материале.

Сайт: Fotorama.ucoz.org

Демонстрация
2018-11-24 Загрузок: 1 Просмотров: 230 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar