» »

Красивый слайдер кино онлайн для uCoz


Красивый слайдер кино онлайн для uCoz

Всегда на кино онлайн тематике есть слайдер, который прокручивает баннеры. И вот горизонтальный, который можно поставить под шапку, как на светлый или темный ресурс. Здесь все просто, вы задаете сколько должно быть в нем изображений и когда страница пройдет перезагрузку то они автоматически меняются. Так очень просто сделан и работает отлично, можно посмотреть как к примеру он будет стоять.



Так же как заметили на нем стоят кнопки, можно поставить свои темно прозрачные и будет смотреться еще красивей. С ним идут стили и это означает, что гамму цвета можно выстроить так, как на вашем ресурсе.

Преступаем к установке:

Давайте для начало сделаем информер в админ панели с такими параметрами.

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 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>


Теперь настало очередь для CSS в него ставим эти стили, где какраз кнопки.

Код
.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://zornet.ru/Ajaxoskrip/Fyrkes/Ftark/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://zornet.ru/Ajaxoskrip/Fyrkes/Ftark/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://zornet.ru/Ajaxoskrip/Fyrkes/Ftark/slider_arrow.png") -2px 0px no-repeat;
}  
.sliderButtonPrev:active {  
  background: url("http://zornet.ru/Ajaxoskrip/Fyrkes/Ftark/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://zornet.ru/Ajaxoskrip/Fyrkes/Ftark/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>


В этом коде стоит номер информер, так нам нужно поставить свой, который создали, под каким он идет.

Автор: Дмитрий Николаев
30.01.2016 Просмотров: 756 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Tergran
Tergran 30.01.2016 06:041
0
Нормальный слайдер, только вот кнопки ему заменить и замечательно.
ucozmental
ucozmental 30.01.2016 06:082
0
Но они только на кино онлайн, но еще можно иногда заметить на игровом сайте.
AnTron
AnTron 30.01.2016 06:113
0
А вот по мне, кнопки в нем не важны, их вообще можно убрать, так как он должен сам крутить, чтоб рабочий был.
Сопрано
Сопрано 30.01.2016 06:144
0
Но если на сайте стоит, то думаю работает, тут не нужно гадать, так то основном все видно же что скринят сайта.
Kosten
Kosten 21.09.2016 15:325
0
Также можно просто стили поставить в информер и поставить другие кнопки и изменить цвет, что сделал и теперь можно по такому оттенку и размеру выставить.



Все также, только в информер стили добавляем а в css не нужно ставить.

Код
<li class="sliderElement rad3" style="width: 147px; height: 178px; float: left;"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$" style="width: 147px; height: 178px;"></a></li>

<style>
.sliderContent {padding:5px 0px; background:#2B2929; width: 100%!important;} .sliderElement {margin:3px; padding:3px; opacity:0.7; background-color:#5F6365; border-radius: 3px} .sliderElement:hover {opacity:3;}  
  .sliderButtonNext {  
  background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-9.png" <img src="/.s/sm/23/wink.gif" border="0" align="absmiddle" alt="wink" /> no-repeat;  
  width: 60px;  
  height: 37px;  
  text-decoration: none;  
  position: absolute;  
  z-index: 2;  
  top: 90px;  
  left: -10px;  
}  
.sliderButtonPrev {  
  background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-9.png" <img src="/.s/sm/23/wink.gif" border="0" align="absmiddle" alt="wink" /> -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://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-9.png" <img src="/.s/sm/23/wink.gif" border="0" align="absmiddle" alt="wink" /> -2px 0px no-repeat;  
}  
.sliderButtonPrev:active {  
  background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-9.png" <img src="/.s/sm/23/wink.gif" border="0" align="absmiddle" alt="wink" /> 1px -38px no-repeat;  
}
</style>
avatar