Среда, 27.11.2024, 21:45

Мой сайт

Скрипты,шаблоны для ucoz


Слайдер для кино сайта uCoz
25.10.2015, 17:41
Делал себе слайдер на свой кино сайт и вот как всегда думаю с вами поделиться, думаю многим кто держит кино сайт этот слайдер будет в самый раз.

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

Для того что бы проверить и посмотреть как работает этот слайдер вы можете перейти на сайт CsTavr.Ru где стоит и работает этот слайдер.

Установка!

В первую очередь создадим информер с такими параметрами.

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 20 · Колонки: 1 ]

Далее в шаблон информера ставим этот дизайн

Код

<li class="sliderElement rad3" style="width: 153px; height: 200px; float: left;"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$" style="width: 153px; height: 200px;"></a></li>


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

Код
.sliderContent {padding:5px 0px; background:#333333; width: 100%!important;} .sliderElement {margin:3px; padding:3px; opacity:0.7; background-color:#1676A6;} .sliderElement:hover {opacity:3;}
  .sliderButtonNext {
  background: url("http://cstavr.ru/img/slider_arrow.png") no-repeat;
  width: 60px;
  height: 37px;
  text-decoration: none;
  position: absolute;
  z-index: 2;
  top: 90px;
  left: -10px;
}
.sliderButtonPrev {
  background: url("http://cstavr.ru/img/slider_arrow.png") -2px -38px no-repeat;
  width: 60px;
  height:37px;
  text-decoration: none;
  position: absolute;
  z-index: 2;
  top: 90px;
  right: -1px;
}
.sliderButtonNext:active {
  background: url("http://cstavr.ru/img/slider_arrow.png") -2px 0px no-repeat;
}
.sliderButtonPrev:active {
  background: url("http://cstavr.ru/img/slider_arrow.png") 1px -38px no-repeat;
}


Ну и остаётся установить код в нужное место на сайте который будет и работать нашим слайдером и для этого копируйте код ниже и ставьте где вам нужно.

Код
<div id="slider_2014" style="position: relative;width: 992px;">
<a href="#" class="sliderButtonNext"></a>
<a href="#" class="sliderButtonPrev"></a>
<div class="sliderContent" timeoutid="3717" style="height:200px; overflow: hidden;">
<ul class="sliderElements" style="margin: 0px; padding: 0px; position: relative; list-style-type: none; width: 3330px; height: 200px; left: 0px;">
$MYINF_4$
</ul>
</div>
</div>
<script type="text/javascript" src="http://cstavr.ru/js/sliderFor.js"></script>
<script type="text/javascript"><!--
$(function(){
  $('#slider_2014').sliderForDLE({scroll:1, visible:9, speed:1000, interval:5, auto:true, vertical:false, course:'next', buttonNext:'sliderButtonNext', buttonPrev:'sliderButtonPrev',mousewheel:false}).show();
});
//--></script>


В коде находим этот код информера

Код
$MYINF_4$


И меняем его на свой код информера!
Категория: Скрипты для uCoz | Добавил: Дмитрий
Просмотров: 1388 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
avatar
Категории раздела
Скрипты для uCoz [188]
Шаблоны для uCoz [80]
Графика для сайта [29]
Программы для сайта [5]
uCoz уроки [19]
Web статьи [4]
VIP работы [3]
Поиск
Вход на сайт
Наш опрос
Хотели бы Вы создать бизнес вместе с Ucoz (Uweb)?
Мини-чат
Друзья сайта
Статистика

Сейчас онлайн: 6
Гостей: 6
Пользователей: 0