+ +

Flex-slider как на Playground для uCoz

Flex-slider как на Playground для uCoz
Цена: БЕСПЛАТНО
Просмотров: 1361
Добавлено: 31.10.2016
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: СКАЧАТЬ
Демо: Смотреть
Информация о материале
Адаптация очередного слайдера, которых на сайте уже немало, но у этого вроде есть свои особенности и преимущества. По крайней мере у него есть миниатюры, авто-прокрутка, картинки автоматически растягиваются под размеры слайдера, и вообще сам слайдер полностью адаптивный. В слайдах может отображаться название и описание, а в миниатюрах только описание, что также кому-то может быть важно. Слайдер основан на галерее Flex-slider и карусели jCarousel, то есть по сути это два в одном, а оформление взято с сайта Playground.

Установка слайдера

1. Скачайте архив, и залейте папку flex-slider со всем содержимым в корень сайта.

2. В head вставьте стили и шрифты:
Код
<link rel="stylesheet" href="/flex-slider/style.css">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Так же напомню, что для работы скрипта необходима библиотека jQuery, но в uCoz она уже присутствует.

3. В нижнюю часть сайта вставьте скрипты:
Код
<script src="/flex-slider/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/flex-slider/flexslider-min.js"></script>
<script src="/flex-slider/jCarousel.js"></script>

4. Теперь необходимо создать 2 информера: один будет выводить слайды, а другой миниатюры. Настройки у обоих должны быть одинаковые, разный только шаблон.

Шаблон для информера слайдов:
Код
<li class="flex-slider-item">
<a href="$ENTRY_URL$">
<img src="$IMG_URL1$" alt="$TITLE$">
<div class="caption">
<div class="subtitle">$CATEGORY_NAME$</div>
<div class="title">$TITLE$</div>
</div>
</a>
</li>

Шаблон для информера миниатюр:
Код
<li>
<a href="$ENTRY_URL$">
<img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" alt="$TITLE$">
<div class="title">$TITLE$</div>
</a>
</li>

5. Ну и последнее, сам блок слайдера ставьте в нужное место на сайте:
Код
<section class="features-slider">
<div id="slider" class="flexslider flex-slider">
<ul class="slides">$MYINF_1$</ul>
</div>
<div id="carousel" class="flexslider flex-carousel">
<ul class="slides">$MYINF_2$</ul>
</div>
</section>

Только номера информеров указывайте в соответствии с тем, как вы их создали.

Все готово!

Теги: responsive, Slider, jCarousel
Комментарии (8)
avatar
7
Скажите пожалуйста, а как настроить что бы изображения в слайдере сами менялись?
avatar
8
Блоки слайдов и миниатюр выводить нужно через информеры.
avatar
5
добрый день подскажите в каком файле можно изменить размер слайдера biggrin
avatar
6
Как всегда такие вещи настраиваются в файле стилей с расширением .css
avatar
4
круто biggrin
avatar
3
" В head вставьте стили и шрифты " это куда, страницы сайта, после тега head вверху ?
avatar
2
Очень круто
avatar
1
Спасибо, давно такой хотел)