—»     —»   Tiny Circleslider: кто сказал, что слайдеры – это скучно?
  Раздел: Меню и Навигация   Комментариев: 1  

Tiny Circleslider: кто сказал, что слайдеры – это скучно?



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

Tiny Circleslider: кто сказал, что слайдеры – это скучно?

Преобразуем список в круглый слайдер

Tiny Circleslider – это плагин для jQuery, который впечатляет своей необычной задумкой. Говоря о HTML, здесь у нас есть неупорядоченный список, несколько div’ов для навигации и дополнительные дизайны элемента:

<div id="circleslider">
<div class="viewport">
<ul class="overview">
<li><a rel="group" href="bild1.jpg"><img src="bild1.jpg" /></a></li>
<li><a rel="group" href="bild1.jpg"><img src="bild1.jpg" /></a></li>

</ul>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>

Контейнер с классом viewport используется для того, чтобы мы могли быть уверенными в том, что отображаться будет только один из элементов контента. Список содержит в себе класс overview, который определяет элемент контента. Дополнительный массив трех контейнеров используется для оформления элементов, которые составляют внешний вид слайдера. Каждый пункт списка в overview-list выделен точкой, в то время как overlay содержит фоновое изображение, которое должно включать прозрачную окружность. Эта окружность затем используется для сокрытия контента. В результате мы получаем то, о чем говорится в названии плагина, - окружность! Класс thumb определяет элемент, который можно перетаскивать по всей окружность. Таким образом функционирует навигация в Tiny Circleslider.

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

Circleslider в действии

После того, как вы все укажете, нужно будет задействовать логику. Вызывайте jQuery и плагин в головном отделе документа. Теперь вы можете передать id HTML-области, в которой должен быть запущен плагин:

<script type="text/javascript">
$(document).ready(function(){
$("#circleslider").tinycircleslider({
interval: true,
radius: 200
});
});
</script>

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

Завершение

Tiny Circleslider очень просто интегрировать и настроить. Необычная навигация подойдет не каждому веб-сайту, но где она подходит, она может создать невероятный эффект. Плагин также работает на Android и iOS.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: слайд-шоу, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5539   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 февраля 2016 @ 23:04
Написал: Дина — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за статью. Подскажите, пожалуйста, как добавить комментарии к слайдам? Я использую tinycircleslider и давно ищу возможность добавить пару фраз к каждому слайду.
Спасибо заранее.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930