Меню сайта
АКЦИЯ!!!
Категории раздела
Меню [34]
Кнопки [15]
Блоки и формы [22]
Вид материалов [41]
Мини-Профили [7]
Переключатели [29]
Информеры [35]
Плейеры для сайта [23]
Слайдеры [21]
Вид опросов [8]
Часы и календари [8]
Статистика сайта [20]
Скрипты [25]
Виджеты [2]
Мини-чаты [6]
Ajax для uCoz [8]
Шаблоны сайтов [0]
Анимация [3]
Игры [6]
Прочее для uCoz [18]
Сервис

Translate my page
Выбрать язык / Select language:



   
веб студия Одесса создание интернет магазинов создание каталога товаров создание сайтов раскрутка сайтов портфолио веб студии продвижение сайтов готовые дизайны сайтов наши заказчики Дизайн макеты для создания сайтов Flash игры для сайтов Мини-Чат для сайтов uCoz Вид опроса для сайта Часы и календари для сайтов дизайн сайтов-визиток онлайн радио для сайта кнопки для сайтов статистика для сайта юкоз мини-профили для сайта Полезное для сайтов переключатели страниц для сайтов ajax окна для сайтов скрипты для сайта информационные блоки для сайтов информеры для сайта Формы для Ucoz слайдер для сайта информеры для юкоз Меню для сайта вид материалов для сайтов вид материалов uCoz Готовые сайты Новые Бизнес дизайн макеты Новые дизайн макеты Медицина дизайн макеты интернет магазинов Новые дизайн макеты Рестораны Новые дизайн макеты Музыка и клубы Новые дизайн макеты Отели дизайн макеты производство и услуги дизайн макеты интерьер дизайн макеты строительство дизайн макеты сельское хозяйство Новый дизайн макет Транспорт Новый дизайн макет Образование Новый дизайн макет Мода дизайн макеты компьютеры дизайн макеты мобилки логотипы Портфолио
Бесплатное отправление смс сообщений!
Поиск
Календарь
«  Июль 2025  »
Пн Вт Ср Чт Пт Сб Вс
 123456
78910111213
14151617181920
21222324252627
28293031
Архив записей
Наш опрос
Есть ли у Вас сайт?
Всего ответов: 27
Друзья сайта

МЕТА - Украина. Рейтинг сайтов Рейтинг@Mail.ru
Статистика

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

Главная » Слайдеры
« 1 2 3

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

Код слайдера для установки и проверки 

Будьте внимательны!!! В примере вписана библиотека jQuery выделенная красным цветом. Она нужна только для проверки работоспособности кода для установки и испытания его ссо своими настройками. При установке на свой сайт, если он на uCoz скрипт нужно удалить из кода.

Код
<script type="text/javascript" src="//s36.ucoz.net/src/jquery-1.7.2.js"></script>
<link rel='stylesheet' href='//delaisait.ucoz.ru/script/sluder/2014/flexslider/flexslider.css' type='text/css' media='all' />
<link rel='stylesheet' href='//delaisait.ucoz.ru/script/sluder/2014/flexslider/public.css' type='text/css' media='all' />
<script type='text/javascript' src='//delaisait.ucoz.ru/script/sluder/2014/flexslider/jquery.flexslider-min.js'></script>
<style>
#metaslider.flexslider li {
margin-right: 5px !important;
}
#ds-flexslider {
max-width:600px;
margin:0 auto;
}
</style>
<div id="ds-flexslider" class="metaslider metaslider-flex">
<div id="metaslider_container">
<div id="metaslider" class="flexslider">
<ul class="slides">
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/947677767.jpg" alt="Девушка Эльф" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка Эльф</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/769128589.jpg" alt="Девушка в чёрном" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка в чёрном</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/378189360.jpg" alt="Девушка в красном" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка в красном</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/84040181.jpg" alt="Девушка в свадебном платье" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка в свадебном платье</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/572570776.jpg" alt="Девушка с бабочкой" />
</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>

 Возможные изменения в слайдере 
Не исключено что эта информация может пригодится:
1.Вопрос: Как сделать слайдер не фиксированным по ширине, а на всю свободную ширину?
1.Ответ: Заменить в стилях (max-width:600px;) на (max-width:100%;) и убрать функцию в скрипте (itemWidth:600,). Имейте в виду что элементы слайдов должны иметь одинаковый размер, иначе будет корявово.
2.Вопрос: Как убрать расположение слайдера по центру?.
2.Ответ: По умолчанию слайдер будет центрироваться, чтобы сделать расположение свободным уберите в стилях строку (margin:0 auto;).
3.Вопрос: Как убрать пустой промежуток между слайдами?
3.Ответ: Измените в стилях строку (margin-right: 5px !important;) на (margin-right: 0 !important;) и удалите функцию в скрипте (itemMargin:5,).

 

Категория: Слайдеры | Просмотров: 1470 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

1-10 11-20 21-21

Copyright "IPC" © 2008
Хостинг от uCoz