• 2969
  • 0
  • Автор: Blueberry
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Blueberry – отличная разработка marktyrrell, которая позволяет быстро создать слайдер из нескольких изображений на Вашем сайте.

1. В самом начале нам необходимо скачать Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. .
2.Распаковываем архив в корневую папку сайта .
3.Далее,в main.tpl необходимо активировать плагин подключаем библиотеку jquery и сам плагин:

Код:
<script src="ljquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
4.Здесь мы указали путь до этих файлов.
5.Теперь мы активируем сам слайдер таким способом:
Код:
<script>
$(window).load(function() {
$('.blueberry').blueberry({
interval: 5000,
duration: 500,
lineheight: 1,
hoverpause: true,
pager: true,
keynav: true
});
});
</script>
Разработчик оставил нам не большую возможность изменить параметры отображения слайдера и картинок.

interval – Интервал смены изображений. Указывается в милисекундах.
duration – Длительность перехода/эффекта смены изображений. Указывается в милисекундах.
lineheight – Высота отображения изображений. Указывается в пикселях.
hoverpause – Остановка слайдера при наведения курсора мышки на изображение. Отключить: false;
pager – Отключить/включить отображение навигации изображение под слайдером в виде кружков. Отключить: false;
keynav – Возможность менять изображений с помощью кнопок навигации на клавиатуре.

Вот мы и разобрались с основными настройками. Теперь нам надо создать сам слайдер на странице сайта. Делается это довольно просто:
Код:
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
</div>
<!-- blueberry -->
Мы создали блок с присвоенным классом blueberry и внутри него в теге li разместили все изображения (адрес их местонахождения), который мы хотим задействовать в слайдере. В данном примере их 3.

Нам даётся возможность полностью настроить отображение внешнего вида слайдера с помощью подключаемого файла стиля
blueberry.css, который расположен в архиве. Откройте его и Вы с легкостью сможете изменить размер слайдера, его расположение, цвет фона и т.п. По умолчанию мы задали белый цвет фона, ширину изобржений в 500px и размещение его по центру страницы:
Код:
.blueberry { 
max-width: 500px;
background: #fff;
padding: 20px;
margin: 10px auto;
}
Теперь всё готово! Открываем страницу и любуемся нашим новым слайдером, который украсит сайт!

Можешь почитать и вот эту статейку "Переменные используемые в NG"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element