Адаптивный слайдер Fotorama для сайта
 | |
| Присутствие слайдера на сайте всегда особо привлекает своим стилей гостей и пользователей ресурса, плюс, если он идет в адаптивной верстке. Так как его можно корректно наблюдать и перематывать изображение на всех мобильных аппаратах. Вашему вниманию слайд, под названием Fotorama, который является не сложным плагином для фотоальбома или страницы с перемещением снимков, что безусловно поможет веб разработчику создать оригинальную и красивую галерею с присутствием красивых снимков, а также по сторонам идут стрелки для переключения слайда. Также присутствуют понятные элементы для полного управления, и что главное, это отличная совместимость с браузером. Также можете использовать этот плагин на любых других мобильных гаджет, где полностью функционал сохраняться по умолчанию. Вы можете скачать архив, где будут идти файлы и есть тема для демонстраций, где присутствует много примеров, которые помогут вам быстро создать свою собственную галерею. Проверяя его по функциональности, где вид по размерам указан в коде, что можно увидеть при открытии портала или страницы.  Это уже идет ближе к смартфону или планшету.  А так будет выглядеть на мобильном экране.  Приступаем к установке: 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 Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |