Встретил на Google+ упоминание о плагине под jQuery для создания карусели - OWL Carousel.
Попробовал с ним разобраться и посмотреть примеры создания слайдеров на официальной странице. Могу сказать, что я впечатлен данным скриптом и его возможностями. Слайдер адаптивный, имеет множество настроек, обладает хорошими эффектами “из коробки”. Мое личное мнение - отличный выбор для применения на практике!
Официальная страница проекта располагается здесь - OWL Carousel. Стабильная версия скрипта на данный момент -
1
v1.3.2
, но на странице упоминается о версии
1
2.0.0-beta
. Для своей работы плагин требует библиотеки jQuery версии не ниже
1
1.7
.
Ниже я попробую создать простой вариант карусели с помощью плагина OWL Carousel. Более интересные и продвинутые варианты, я думаю, показывать не имеет смысла. По той простой причине, что разобравшись с базовым вариантом, всегда можно его улучшить. И для этой цели как ничто лучше подойдут примеры на официальной странице - Demo и More Demo. Стоит сказать, что для себя я увидел там готовые решения практически на все случаи жизни.
Подключение OWL Carousel
Для подключения плагина OWL Carousel к готовому проекту необходимо получить архив плагина с официальной страницы - OWL Carousel или с GitHub - OwlCarousel. В архиве имеется все, что необходимо - библиотека jQuery, плагин
1
owl.carousel.min.js
, готовые CSS-стили для карусели. Ничего сложного или необычного в подключении плагина OWL Carousel нет - все стандартно.
HTML-разметка и подключение скрипта будут выглядеть следующим образом:
- опциональная, для настройки плагина под конкретные условия.
Тип HTML-элементов для создания разметки слайдера, по большому счету, не имеет особого значения, так как скрипт OWL Carousel умеет работать со всеми типами. Главное, чтобы у блока-обертки имелся обязательный класс
1
owl-carousel
, к которому будет производиться привязка стилей из файла
1
owl.carousel.css
.
В конце тела
1
body
документа подключаются библиотека jQuery, скрипт плагина OWL Carousel и файл настроек данного скрипта.
Все, можно смотреть на готовый (слегка подредактированный) результат:
Настройка плагина OWL Carousel
Скрипт OWL Carousel имеет большое количество настроек, которые добавляются или убираются в файле настроек. Ссылка на страницу с полным списком настроек располагается здесь - Customizing OWL Carousel.
К примеру, переменная
1
items
задает количество одновременно показываемых в слайдере изображений:
items:5
Переменные
1
itemsDesktopSmall
,
1
itemsTablet
,
1
itemsTabletSmall
,
1
itemsMobile
устанавливают количество одновременно отображаемых изображений в зависимости от размера окна браузера. Например, запись вида
1
itemsDesktop: [1199,4]
“говорит” браузеру, что при размере окна меньше или равному 1199px следует отображать одновременно только четыре изображения:
itemsDesktop:[1199,4]
Переменная
1
singleItem
устанавливает, отображать ли только одно изображение в слайдере или несколько:
singleItem:false
Переменные
1
navigation
и
1
pagination
управляют возможностью включения или выключения навигации\пагинации у слайдера:
navigation:true,pagination:true
Автоматическая прокрутка изображений в слайдере включается с помощью переменной
1
autoPlay
:
autoPlay:true
Имеются множество других настроек плагина OWL Carousel, с которыми можно легко разобраться на официальной странице. Все перечислять здесь я не буду.
Варианты слайдера OWL Carousel
Стоит “побродить” по странице с демонстрационными примерами работы плагина OWL Carousel. Там есть на что посмотреть и что подобрать для себя.
Наиболее интересные (для меня) примеры расположены в списке со ссылками.
К примеру, по ссылке CSS3 Transitions располагается образец слайдера с эффектом перехода, основанном на CSS3-свойстве transition. Более того, из выпадающего списка можно прямо на странице подобрать себе подходящий эффект - своеобразный конструктор получается:
Или пример создания слайдера с расположенной вверху полосой progress bar - Progress Bar.
Заключение
Плагин OWL Carousel мне понравился и я буду стараться применять его на практике, при верстке страниц.
В этой статье будет детально рассмотрен вопрос создания фигуры шестиугольника (hexagon) на CSS.
Материал целиком основан на замечательной статье CSS Hexagon Tutorial. В Сети имеется хорошая статья по примерам создания различных видов фигур на CSS, и располагается эта статья на блоге известного CSS-гуру Chris Coyier Shapes of CSS. Среди прочих фигур там есть и желанный шестиугольник
1
hexagon
с готовым CSS-кодом что называется, “бери и пользуйся”.
Но ведь такой подход для нас не интересен, правда? Это потом, когда мы изучим вопрос создания шестиугольника, мы будем делать так - нашел готовый код, скопировал к себе, подредактировал и готово! А сейчас мы пошагово пройдем весь путь, от начала и до конца - это даст нам понимание процесса.
Как будем строить hexagon
Фигура hexagon изначально кажется неприступной - не понятно, с какого боку к ней подойди, чтобы начать постороение шестиугольника на CSS. Однако, если внимательно присмотреться, то hexagon можно разделить на три простые фигуры:
Видно, что фигура состоит из двух одинаковых треугольников и одного прямоугольника. Построение треугольников на CSS выполняется очень просто - “CSS – почему треугольник это треугольник”, прямоугольника - вообще в два движения.
Поэтому, построение шестиугольника hexagon на CSS сводится к двух задачам:
создать два треугольника
создать один прямоугольник
Построение треугольников на CSS
Задачу создания треугольников на CSS начнем с построения обычного квадрата со стороной в
У получившегося треугольника все стороны равны - высота и ширина по 30px каждая. Нам же необходимо “растянуть” треугольник в ширину, чтобы он у него появился тупой угол. Для этого нужно увеличить ширину боковых границ
Задача создания треугольника нами выполнена. Теперь необходимо получить точно такой треугольник, только “направленный” вниз. Это просто - достаточно поменять нулевое значение между верхней и нижней границей фигуры. Все остальные значения останутся неизменными. Чуть не забыл сказать, что для “повернутого” треугольника придется создать в HTML-коде новый блок:
Первый шаг по созданию шестиугольника hexagon на CSS выполнен - у нас есть два одинаковых разнонаправленных треугольника. Теперь нужно создать “тело” для шестиугольника - прямоугольник.
Построение прямоугольника на CSS
Для создания прямоугольника на CSS достаточно прописать для нового блока три величины - высоту, ширину и фоновый цвет. Новый блок я размещу между двумя блоками-треугольниками.
А вот с размерами для прямоугольника нужно разобраться немного подробнее. У него ширина должна быть равна удвоенной ширине боковой границы треугольника:
Все - задача построения шестиугольника hexagon на CSS выполнена - все оказалось достаточно просто!
Создание сетки из hexagon
Теперь можно усложнить задачу и создать из фигур hexagon своеобразную сетку, а-ля пчелиные соты. Задача тривиальная и весь вопрос сводиться к нескольким CSS-свойствам:
1
float
,
1
overflow
,
1
margin
,
1
padding
.
Создаю первый ряд сетки:
<divclass="row"><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --></div><!-- end row -->
Дальше продолжать не имеет смысла - все остальные ряды строятся аналогично. Нужно только управлять ими с помощью соотвествующих классов, смещая влево или вверх:
Лучше перейдем к другому интересному вопросу - созданию такого же шестиугольника hexagon, но несколько иной формы, “повернутого”. У которого углы развернуты по-горизонтали, а не по-вертикали.
Построение повернутого hexagon на CSS
Задача создания развернутого hexagon почти ничем не отличается от задачи построения обычного шестиугольника. Только потребуется несколько дополнительных строчек кода.
Дело в том, что в этом случае нужны углы, которые будут располагаться горизонтально и “смотреть” влево или вправо. Помимо этого, понадобиться “плавание” влево
1
float: left;
.
Для блока - “тела” hexagon нужно будет изменить значения высоты или ширины на прямопротивоположные.
/* LEFT ARROW */.hexagon_triangle_left{border-left-width:0;border-top-color:transparent;border-bottom-color:transparent;}.hexagon_triangle_left_large{border-top-width:52px;border-bottom-width:52px;}/* RIGHT ARROW */.hexagon_triangle_right{border-right-width:0;border-top-color:transparent;border-bottom-color:transparent;}.hexagon_triangle_right_large{border-top-width:52px;border-bottom-width:52px;}.inside_rotate{width:60px;height:104px;background-color:#778899;}.left{float:left;}
Добавлю несколько таких шестиугольников, чтобы получился полный ряд:
Отлично! Теперь нужно добавить еще один ряд - нижний. При этом опять придется немного модифицировать код, чтобы произвести смещение фигур влево и вверх:
Рассмотренный выше способ создания hexagons хорош, но имеет один недостаток - слишком много дополнительных блоков, одними из которых являются блоки для создания треугольников.
Можно (и нужно) значительно сократить код, воспользовавшись для этой цели псевдо-классами
1
:before
и
1
:after
. Давайте я так и поступлю, при этом возьму код из примера, не буду ничего выдумывать:
Рассмотренный выше способ неплох, причем оба его варианта. Но для практического применения оба они достаточно трудоемкие. В Сети, помимо многих других подобного рода, имеется online CSS-генератор для создания hexagon в считанные минуты.
Адрес сервиса располагается здесь - CSS Hexagon. Помимо создания самого hexagon, там можно “прикрутить” к фигуре тень и границу, что просто великолепно!
С чего вдруг мне приспичило воспользоваться циклом в препроцессоре? Все, как всегда, просто - в предыдущей статье, посвященной плагину Smooth Scroll (Плагин Smooth Scroll), мне потребовался создать пример разметки HTML-документа с заголовками всех уровней, с первого (h1) до шестого (h6). Все бы ничего, но вручную создавать стили для заголовков всех уровней как-то утомительно.
HTML-разметка для цикла for
Вот я и озаботился задачей автоматизировать этот процесс, через цикл. Для этой цели я использовал цикл
1
for
. Упростил пример, выкинув параграфы и оставив только заголовки всех уровней:
Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.
Этот скрипт предназначен только для одной цели - плавного скроллинга (прокрутки) страницы. Благодаря этому улучшается юзабилити страницы и сайта в целом, так как нет резких скачков при переходе по ссылкам.
Подключение плагина Smooth Scroll
Подключение Smooth Scroll к HTML-странице производится как обычно:
, что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.
Варианты выборки в Smooth Scroll
Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.
Примеры выборок взяты мною из файла
1
readme.md
, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:
Allows for easy implementation of smooth scrolling for same-page links.
Works like this:
1
$('a').smoothScroll();
Specify a containing element if you want:
1
$('#container a').smoothScroll();
Exclude links if they are within a containing element:
Add a callback function that is triggered before the scroll starts: `$(‘a’).smoothScroll({beforeScroll: function() { alert(‘ready to go!’); }});
Add a callback function that is triggered after the scroll is complete:
1
$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});
Пример работы Smooth Scroll
Ниже привожу пример HTML, SCSS и JS-кода, на котором проходил “испытание” плагин Smooth Scroll у меня, в моей “лаборатории”.
<head><metacharset="utf-8"><title>Smooth Scroll Plugin</title><linkrel="stylesheet"href="css/style.css"></head><body><h1class="head">smooth scroll plugin</h1><ulclass="scroll"><li><ahref="#h1">header 1</a></li><li><ahref="#h2">header 2</a></li><li><ahref="#h3">header 3</a></li><li><ahref="#h4">header 4</a></li><li><ahref="#h5">header 5</a></li></ul><h1>header 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h2>header 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h3id="h3">header 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h4>header 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5id="h5">header 5</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 6</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 7</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h1>header 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h2id="h2">header 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h3>header 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h4>header 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 5</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 6</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 7</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h1id="h1">header 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h2>header 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h3>header 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h4id="h4">header 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 5</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 6</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 7</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><!-- SCRIPTS --><script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.smooth-scroll.min.js"></script><script src="js/settings.js"></script></body>
Люблю я разбирать новые слайдеры и пробовать с ними работать. На этот раз я столкнулся с неизвестным для себя плагином FlexSlider в одном из готовых HTML-макетов австралийского фрилансера Peter Finlan.
Домашняя страничка слайдера FlexSlider располагается здесь - FlexSlider 2. Как сказано на официальной страничке, слайдер является адаптивным, периодически.
В арсенале у плагина заготовлена возможность автоматического генерирования перемотки изображений, пагинации страниц; показ не только изображений, но и видео. А вот заголовок для данного слайдера не предусмотрен, насколько я понял (поправьте меня, если я неправ - буду только рад, ибо слайдер понравился).
Зато у FlexSlider я впервые (для себя) встретил такую удобную возможность, как управление отображением стрелок перемотки или пагинацией через опции самого слайдера. То есть, не нужно копаться в сгенерированном коде DOM-дерева с помощью Firebug, чтобы найти там блок пагинации (к примеру) и отключить его через CSS-правило
1
display: block;
. В случае с FlexSlider все делается проще - прописал одну строчку
1
controlNav: false
и пагинация отключена.
Подключение FlexSlider
Подключение плагина FlexSlider к HTML-странице производится абсолютно стандартно, как и для любого другого плагина, написанного под библиотеку jQuery (я не забыл сказать, что FlexSlider написан под jQuery?). В моем случае я использовал версию jQuery 1.11.1. Здесь есть небольшое ограничение - FlexSlider 2.3.0 требует для своей работы как минимум jQuery 1.4.2. Кнопка для скачивания FlexSlider находиться там же, где вся остальная информация - FlexSlider Download.
Подключение FlexSlider в HTML:
HTML-разметка для FlexSlider
Разметка для слайдера на странице выполняется в виде блока-обертки и маркированного списка:
<!-- FLEXSLIDER --><divclass="flexslider"><ulclass="slides"><li><imgsrc="images/caramel.jpg"width="800"height="504"alt="FlexSlider"title="Flexslider"/></li><li><imgsrc="images/cheesecake.jpg"width="800"height="504"alt="FlexSlider"title="Flexslider"/></li><li><imgsrc="images/donut.jpg"width="800"height="504"alt="FlexSlider"title="Flexslider"/></li><li><imgsrc="images/lemon.jpg"width="800"height="504"alt="FlexSlider"title="Flexslider"/></li></ul></div><!-- end flexslider -->
Пример взят с официальной странички и в нем оставлены имена классов для обоих блоков, как есть. Плагин при своей инициализации генерирует два дополнительных блока:
ol class=”flex-control-nav” - для пагинации изображений
ul class=”flex-direction-nav” - для стрелок перемотки изображений
… а также создает блок-обертку
1
div class="flex-viewport"
для списка
1
ul class="slides"
. То есть, разметка получается прозрачной и ясной.
Инициализация FlexSlider
Для инициализации плагина FlexSlider нужно в конфигурационном js-файле для случая самого простого вида написать такие строки:
В принципе, уже этого достаточно для создания слайдера FlexSlider - он уже работает. Можно стилизовать его самому с помощью CSS, или же подключить уже готовые CSS-стили и отредактировать их - кому как удобно. Я попробую отредактировать внешний вид слайдера сам:
slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
animationSpeed: 600, //Integer: Скорость анимации в мс
initDelay: 0, //{Новое} Integer: Задержка инициализации в мс
-randomize: false, //Boolean: Случайный порядок слайдов
Использование функций
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
Первичное управление
controlNav: true, //Boolean: Создание навигации для постраничного управления каждым слайдом. Замечание: оставьте true для использования manualControls
directionNav: true, //Boolean: Создание навигации для кнопок назад/вперед (true/false)
prevText: “Previous”, //String: Тест для кнопки “previous” пункта directionNav
nextText: “Next”, //String: Тест для кнопки “next” пункта directionNav
Вторичная навигация
keyboard: true, //Boolean: Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
multipleKeyboard: false, //{Новое} Boolean: Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
mousewheel: false, //{Обновление} Boolean: Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
pausePlay: false, //Boolean: Создание динамического pause/play элемента
pauseText: “Pause”, //String: Текста для кнопки “pause” элемента pausePlay
playText: “Play”, //String: Текст для кнопки “play” элемента pausePlay
Специальные свойства
controlsContainer: “”, //{Обновление} jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(“.flexslider-container”). Свойство игнорируется если элемент не найден.
manualControls: “”, //{Обновление} jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(“.flex-control-nav li”) или “#tabs-nav li img”, и т.п.. Количество элементов в вашей controlNav должно совпадать с количеством слайдов/табов.
sync: “”, //{Новое} Selector: Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
asNavFor: “”, //{Новое} Selector: Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера
Опции карусели
itemWidth: 0, //{Новое} Integer: Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
itemMargin: 0, //{Новое} Integer: Отступ между элементами карусели
minItems: 0, //{Новое} Integer: Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
maxItems: 0, //{Новое} Integer: Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
move: 0, //{Новое} Integer: Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы
Callback API
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
before: function(){}, //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
after: function(){}, //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
end: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
added: function(){}, //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
removed: function(){} //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален
Варианты слайдера FlexSlider
На официальной страничке плагина в прекрасно оформленном виде представлены [различные варианты][6] создания слайдера. Все они реализуются с помощью опций этого плагина и дополнительной HTML-разметки.
Например, чтобы создать слайдер с thumbnail-пагинацией, нужно прописать в js-файле настроек:
<!-- Place somewhere in the <body> of your page --><divclass="flexslider"><ulclass="slides"><lidata-thumb="slide1-thumb.jpg"><imgsrc="slide1.jpg"/></li><lidata-thumb="slide2-thumb.jpg"><imgsrc="slide2.jpg"/></li><lidata-thumb="slide3-thumb.jpg"><imgsrc="slide3.jpg"/></li><lidata-thumb="slide4-thumb.jpg"><imgsrc="slide4.jpg"/></li></ul></div>
Но, в принципе, в этом случае рассказывать о возможных вариантах слайдера достаточно глупо - можно и нужно посетить официальную страничку и там смотреть примеры создания.