Суббота, 20.04.2024, 06:34
Главная Регистрация RSS
Приветствую Вас, Гость
НОВЫЕ КОМЕНТАРИИ
Коментарий:Невероятно....это полезный веб-сайты.
Добавил:Stevensleed

Коментарий:Сколько лет прошло, старина?) зарегался, просто вспомнить те времена,
Добавил:Vj PitBulvjpitbul94

Коментарий:Всё исправил, проверил , скачивайте
Добавил:Modred

Коментарий:Классный скрипт , но на PHP
Добавил:ZemHU

Коментарий:Отличный движок Добавил:DexonEdutt

Коментарий:Легко установить Добавил:Mixhoarm

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Нас сегодня посетили :
Поиск
Главная » Файлы » Скрипты для UCOZ » Слайдер для UCOZ

Резиновый слайдер FlexSlider

Резиновый слайдер FlexSlider


Слайдер с адаптивными свойствами будет изменять свои размеры относительно свободного пространства окна. Изначальные размеры изображений не имеют значения и будут масштабироваться согласно устанавливаемым размерам по месту. FlexSlider может использоваться как слайдер для видео, применяя в качестве слайдов видео проигрыватели. Резиновый слайдер имеет большое количество настроек, при помощи которых Вы сможете настроить воспроизведение на своё усмотрение. По умолчанию, готовый код для установки полностью настроен, Вам останется поместить его в требуемое место, изменить путь к используемым слайдам и радовать посетителей своими творениями




Код

 

<script type="text/javascript" src="//s36.ucoz.net/src/jquery-1.7.2.js"></script></p> <link href="//delaisait.ucoz.ru/script/sluder/2014/flexslider/flexslider.css" media="all" rel="stylesheet" type="text/css" /> <link href="//delaisait.ucoz.ru/script/sluder/2014/flexslider/public.css" media="all" rel="stylesheet" type="text/css" /><script type='text/javascript' src='//delaisait.ucoz.ru/script/sluder/2014/flexslider/jquery.flexslider-min.js'></script> <style type="text/css">#metaslider.flexslider li { margin-right: 5px !important; } #ds-flexslider { max-width:600px; margin:0 auto; } </style> <div class="metaslider metaslider-flex" id="ds-flexslider"> <div id="metaslider_container"> <div class="flexslider" id="metaslider"> <ul class="slides">  <li style="display: none;"><a href="#" target="_blank"><img alt="Девушка Эльф" src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/947677767.jpg" /> </a>  <div class="caption-wrap">  <div class="caption">Девушка Эльф</div>  </div>  </li>  <li style="display: none;"><a href="#" target="_blank"><img alt="Девушка в чёрном" src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/769128589.jpg" /> </a>  <div class="caption-wrap">  <div class="caption">Девушка в чёрном</div>  </div>  </li>  <li style="display: none;"><a href="#" target="_blank"><img alt="Девушка в красном" src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/378189360.jpg" /> </a>  <div class="caption-wrap">  <div class="caption">Девушка в красном</div>  </div>  </li>  <li style="display: none;"><a href="#" target="_blank"><img alt="Девушка в свадебном платье" src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/84040181.jpg" /> </a>  <div class="caption-wrap">  <div class="caption">Девушка в свадебном платье</div>  </div>  </li>  <li style="display: none;"><a href="#" target="_blank"><img alt="Девушка с бабочкой" src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/572570776.jpg" /> </a>  <div class="caption-wrap">  <div class="caption">Девушка с бабочкой</div>  </div>  </li> </ul> </div> </div> </div> <script> $(document).ready(function () { $('#metaslider').flexslider({ slideshowSpeed:3000, animation:'slide', controlNav:true, directionNav:true, pauseOnHover:true, direction:'horizontal', reverse:false, animationSpeed:600, prevText:"<", nextText:">", easing:"linear", slideshow:true, itemWidth:600, itemMargin:5, useCSS:true }); }); </script>  <p>



Проверте код в ректоре ниже



Проверить код

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

Категория: Слайдер для UCOZ | Добавил: mytorrento | Теги: СЛАЙДЕР УКОЗ, Слайдер
Просмотров: 1593 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0