Адаптивный слайдер FlexSlider с резиновыми свойствами

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

Функция	Описание функции
animation: "slide",	Применяемый тип анимации для смены слайдов, можно применить значение fade.
slideshow: true,	Автовоспроизведение слайдов, по умолчанию включено, можно отключить значением false.
easing: "linear",	Функция изменения поведения анимации, подробнее о возможностях и применяемых значениях Вы можете узнать из статьи: jQuery UI Easing .
direction: "horizontal",	Вы можете установить направление движения изображений горизонтально или вертикально используя значение vertical.
reverse: false,	Реверсивное движение изображений, по умолчанию отключено, чтобы включить измените на true.
startAt: 0,	Слайдер может начинать показ изображений с любого указанного в числе, по умолчанию ноль, значит с первого в коде.
slideshowSpeed: 3000,	Скорость смены изображений одного другим, Вы можете указать любое число, оно будет воспринято как миллисекунды.
animationSpeed: 600,	Скорость интенсивности анимации указанное в миллисекундах.
randomize: false,	Если Вы хотите чтобы изображения менялись в случайном порядке, установите значение true.
pauseOnAction: true,	Пауза в смене изображений при использовании элеменов управления слайдером, для отключения используйте false.
pauseOnHover: false,	Пауза в смене при наведении на изображение, по умолчанию отключено, чтобы включить измените на true.
useCSS: true,	Разрешить использование свойств CSS3 для добавления индивидуальных особенностей, не рекомендуется изменять, но если есть желание, тогда меняем на false.
touch: true,	Разрешить сенсорную навигацию на поддерживаемых устройствах, не стоит менять, но раз надо, меняем на false.
video: false,	Функция использования видеопроигрывателя вместо изображений, по умолчанию отключено, если собираетесь использовать слайдер для видео, нужно включить значением true во избежание грфических глюков.
controlNav: true,	Использование элементов управления для смены индивидуального слайда, для отключения используйте false
directionNav: true,	Элементы управления сменой слайдов вперёд\назад, по умолчанию включены, для отключения используйте false.
prevText: "<",	Использование текста в элементе управления кнопки назад\предыдущий, по умолчанию используется стралочка но можно изменить по своему усмотрению.
nextText: ">",	Использование текста в элементе управления кнопки вперёд\следующий, по умолчанию используется стралочка но можно изменить по своему усмотрению.
keyboard: true,	По умолчанию разрешено использовать клавиатуру для смены изображений, если хотите запретить используйте false.
itemWidth: 600,	Ширина слайдера по умолчанию, значения должны быть аналогичны указанным для слайдов.
itemMargin: 5,	Внешний отступ между слайдами, при отсутствии промежутков установить значение ноль, выше в стилях так же установить значение 0 (ноль).

<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>

• 
  Девушка Эльф
• 
  Девушка в чёрном
• 
  Девушка в красном
• 
  Девушка в свадебном платье
• 
  Девушка с бабочкой

источникк