Слайдер изображений как на Kinopoisk для uCoz

5797 просмотров Alan_Writer 10.11.2013

Скачать 📥 Демо ▶️

Слайдер изображений как на Kinopoisk для uCoz. Итак, недавно наткнулся впервые на слайдер изображений на Кинопоиске, до этого ни-разу его там не видел. Мне он сразу понравился внешне, хотя этот слайдер довольно простой, там минимум дизайнерских элементов. Больше всего понравился функционально, во-первых там была авто-прокрутка, при чем круговая - а не только в какую-то одну сторону. Во-вторых скрипт слайдера сам считал сколько картинок в нем, и отображал общее их количество и номер активного слайда в виде цифр.

Конечно, данный слайдер ничем супер уникальным похвастаться не может, но мне он показался достаточно интересным и я его решил адаптировать. Увидеть в живую работу слайдера - можно на демо.

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

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

2). Далее, лучше сперва создать информер со списком изображений. Настраивайте его как вам надо, главное Количество колонок - должно быть 1. В шаблон информера вставьте этот код:
Код
<div class="pic" style="background:url(Код вызова ссылки на картинку) 50% 50% no-repeat" title="Код вызова заголовка"></div>

Код вызова ссылки на картинку - например: $IMG_URL1$
Код вызова заголовка - например: $TITLE$

3). Далее, в нужное место на сайте установите основную часть слайдера:
Код
<div class="mediaSlider">
<div class="item">
<div class="media">$MYINF_1$</div>
<div class="descr">
<div class="txt">
<div class="name"></div>
<div class="num"></div>
</div>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>
</div>
</div>

* Переменная $MYINF_1$ - это код вызова информера, который вы создали выше. Если номер вашего информера отличается, то ставьте тот, который будет указан после его создания. Например: $MYINF_2$ или $MYINF_3$.

4). После основного кода, нужно прописать следующий код:
Код
<link href="/kinoslider/news.css" type="text/css" rel="stylesheet"/>
<script src="/kinoslider/news.js" type="text/javascript"></script>
<script>$(".mediaSlider").mediaSlider({show: true});</script>

* Этот код должен идти именно после основного, если он будет выше него - слайдер работать не будет.

Все готово!

Теги: слайдер картинок, Слайдер изображений, автопрокрутка, слайдер для ucoz, новый слайдер
0 Комментариев