Flexslider - настройка слайдера

Отличный адаптивный слайдер flexslider, очень удобен и прост в настройке, имеет много возможностей.

Варианты слайдера

• Простой слайдер
• Слайдер с миниатюрами
• Слайдер - карусель
• Видео - слайдер

Скачать flexslider Демо

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

CSS

Подключим стили слайдера в тег head

<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />

HTML

<section class="slider">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/img1.jpg" />
            </li>
            <li>
                <img src="images/img2.jpg" />
            </li>
            <li>
                <img src="images/img3.jpg" />
            </li>
            <li>
                <img src="images/img4.jpg" />
            </li>
        </ul>
    </div>
</section>

Javascript

В конце кода подключим jquery и скрипты самого слайдера

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
	$(window).load(function(){
	  $('.flexslider').flexslider({
		animation: "slide"
	  });
	});
</script>

Рассмотрим стандартные настройки, которые выбраны по умолчанию

Функции слайдера

Стандартная навигация

Дополнительная навигация

Свойства

Опции карусели

API слайдера