» »

Flex Slider for сайта uCoz

Flex Slider for сайта uCoz

Очень легкий слайдер для контента с автоматическим переключением. Чаще всего будет использоваться для выделения цитат, блока вопрос-ответ или философских фраз, но возможны и для другие способы применения.

Установка:

Начнем с простого - Разметка HTML

Код
<div id="slider">  
  <div class="slide">  
  <p>краткое описание</p>  
  <p>также написано</p>  
  </div>  
  <div class="slide">  
  <p>здесь описание</p>  
  <p>краткое</p>  
  </div>  
  <div class="slide">  
  <p>здесь второе описание</p>  
  <p>- еще одно описание </p>  
  </div>  
  </div>


CSS

Код
#slider {color:#2980b9;position:relative;font-size:16px;}  
#slider p {padding:2px 0 7px;margin:0;}  
#slider .slide {padding:0 50px;background:url(http://zornet.ru/Aben/Gsa/bq2.png) 0 0 no-repeat;}  
.flex-direction-nav,.flex-direction-nav li {padding:0;margin:0;list-style:none;}  
.flex-direction-nav a {  
z-index:20;  
position:absolute;  
cursor:pointer;  
display:block;  
width: 15px;  
height: 28px;  
top:16px;  
right:0;  
background:url(http://madeas.ru/icon/blog-arrows.jpg);  
overflow:hidden;  
text-indent:100%;  
white-space:nowrap;  
}  
.flex-direction-nav a:hover {background-position:0 -28px;}  
.flex-direction-nav a.flex-prev {right:30px;}  
.flex-direction-nav a.flex-next {background-position:-15px 0;}  
.flex-direction-nav a.flex-next:hover {background-position: -15px -28px;}


Подключаем jQuery

Код
<script type="text/javascript" src="/.s/t/1291/jquery.flexslider-min.js"></script>


и напоследок мини скрипт:

Код
<script type="text/javascript">  
  $(function() {  
  $('#slider').flexslider({  
  selector: ".slide",  
  slideshowSpeed: 5000,  
  pauseOnHover: true,  
  controlNav: false  
  });  
  });  
  </script>


В котором:
slideshowSpeed: 5000, - скорость перехода
pauseOnHover: true, - пауза при наведении мышкой (если не нужно заменяем true на false)

Автор скрипта: Tyler Smith 2012
Демонстрация работоспособности: Flex Slider contenta

jQuery не требует загрузки в корень сайта, так как располагается уже в uCoz и подойдёт к любому сайту.
03.11.2016 Просмотров: 637 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 04.11.2016 02:511
0
iMadeas, больше на табы похоже, а по функциям на слайдер.
Angerfist
Angerfist 04.11.2016 11:542
0
Kosten, информер похожие материалы выводит вообще не в тему материал, видимо при добавлении материалов никто не парится выставлением тегов. К чему я это? может кто захочет увидеть базовые исходники FlexSliderа к примеру для изображений а не юзать поиск.
Kosten
Kosten 04.11.2016 14:243
0
Angerfist, приветствую, не проверял этот материал.
Angerfist
Angerfist 04.11.2016 19:474
+1
Я не про материал, про информер сайта твоего, после материала: похожие материалы. Если теги не проставлены, то по сути он бесполезен.
Start
Start 04.11.2016 21:325
0
Согласен!
Kosten
Kosten 04.11.2016 22:006
0
Так понятно, по внутренним тегам и настроено, и поиск по сайту так работает, если их нет, то нечего искать.
Kolinkor
Kolinkor 05.11.2016 02:357
0
Вообще не понимаю для чего на сайт ставить.
avatar