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

4282 просмотров Alan_Writer 31.10.2016

Адаптация очередного слайдера, которых на сайте уже немало, но у этого вроде есть свои особенности и преимущества. По крайней мере у него есть миниатюры, авто-прокрутка, картинки автоматически растягиваются под размеры слайдера, и вообще сам слайдер полностью адаптивный. В слайдах может отображаться название и описание, а в миниатюрах только описание, что также кому-то может быть важно. Слайдер основан на галерее Flex-slider и карусели jCarousel, то есть по сути это два в одном, а оформление взято с сайта Playground.

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

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

2. В head вставьте стили и шрифты:

Код

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

3. В нижнюю часть сайта вставьте скрипты:

Код

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

Похожие материалы