Псевдоклассы

Псевдоклассы описывают характеристики элементов, такие как динамическое состояние — нажатая ссылка, язык кодировки — абзац на французском языке и т.д. Они не отображаются в исходном документе и не принадлежат дереву документа DOM (дереву документа принадлежат только сами html-элементы).

Разметка html-страниц создаётся с помощью html-элементов. Для каждого html-элемента существуют css-стили по умолчанию, так называемые стили браузера, например, полужирное начертание и разный размер шрифта заголовков h1-h6, подчёркивание и фиолетовый цвет текста ссылки. Эти стили можно изменять, а также задавать дополнительные, пользовательские, с помощью таблиц стилей.

Без использования псевдоклассов изменить внешний вид по умолчанию и задать индивидуальный для каждого элемента можно только используя селектор — имя тега, класс или идентификатор элемента. Но как быть в случае, когда нужно выделить фоном каждую чётную строку таблицы? Прописывать классы вручную для каждой строки таблицы займёт много времени и значительно увеличит разметку. В такой ситуации на помощь приходит псевдокласс :nth-child(even), и с помощью селектора tr:nth-child(even) автоматически устанавливается фон для каждой чётной строки таблицы.

pseudo-class-tr
Рис. 1. Таблица-зебра с помощью класса и псевдокласса

В процессе взаимодействия пользователя со страницей html-элементы приобретают динамические характеристики. Например, когда вы переходите по ссылке, html-элемент <a>текст ссылки</a> приобретает следующие свойства (характеристики): когда вы наводите на ссылку, она получает a:hover, когда вы уже перешли по ссылке — a:visited. Доступ к таким динамическим характеристикам можно получить только с помощью псевдоклассов.

Таким образом, с помощью псевдоклассов можно получить доступ к информации, характеризующей элемент, которая не может быть получена с помощью простых селекторов — p {css-стили} или их комбинации — h1 + p {css-стили}.

Псевдоклассы делятся на статические, например, :last-of-type, и динамические, например, :hover, т.е. появляющиеся у элемента в процессе взаимодействия пользователя с веб-страницей. Имена псевдоклассов чувствительны к регистру. Некоторые псевдоклассы взаимоисключающие, в то время как другие могут одновременно применяться к одному элементу.

Виды псевдоклассов

1. Динамические псевдоклассы

Выбирают ссылки на странице, которые имеют атрибут href и находятся в определенном состоянии, а также некоторые другие элементы:

:link — не посещенная ссылка;

:visited — посещенная ссылка;

:focus — ссылки, а также элементы форм, которые активированы посредством курсора мыши или на которые перешли с помощью клавиатуры (кнопка TAB);

:hover — ссылки, а также другие элементы, стили применяются при наведении пользователем на элемент;

:active — выбирает элемент, активированный пользователем с помощью клика мышки. Обычно применяется для ссылок, но может отбирать и другие элементы на странице.

2. Псевдоклассы пользовательского интерфейса

Относятся к элементам форм.

:disabled — используется для отбора и стилизации заблокированных для выбора и изменения элементов форм;

:enabled — отбирает не заблокированные для выбора и изменения элементы форм;

:checked — применяется для выбора и стилизации элементов <input type="radio">, <input type="checkbox">, а также элементов <option></option>, находящихся внутри элемента <select></select>;

:indeterminate — элементы радио и чекбокс могут быть включены или выключены пользователем. Некоторые из них могут находиться в неопределенном состоянии, к которым и применяется данный псевдокласс.

3. Структурные псевдоклассы

Представляют концепцию структурных псевдоклассов, которая позволяет отбирать элементы на основании информации, которая отражена в дереве документа и не может быть получена при помощи простых селекторов или их комбинации. Отсчёт начинается с элемента с индексом 1.

:root — элемент, являющийся корневым в документе;

:nth-child() — элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
li:nth-child(even) — каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
li:nth-child(odd) — каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
li:nth-child(3) — только элемент с индексом 3.
li:nth-child(an+b) — например, li:nth-child(3n+1) выберет первый (3*0 +1 = 1), четвёртый (3*1 +1 = 4), седьмой (3*2 +1 = 7) элементы и т.д., причём значение b может быть равно нулю;

:nth-last-child() — дочерние элементы на основе их индекса внутри контейнера, при этом отсчёт идёт в обратном порядке, т.е. начиная с последнего элемента. Значениями аргумента могут быть положительные, отрицательные значения, а также ключевые слова even odd;

:nth-of-type() — элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) {float: left;} установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;

:nth-last-of-type() — элементы одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому;

:first-child — элемент, который является первым дочерним элементом некоторого другого элемента;

:last-child — последний дочерний элемент элемента-контейнера;

:first-of-type — первый элемент данного типа среди дочерних элементов родительского элемента-контейнера;

:last-of-type — последний элемент данного типа среди дочерних элементов родительского элемента-контейнера;

:only-child — дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью;

:only-of-type — элемент, который является единственным элементом данного типа в родительском элементе;

:empty — элемент, который не содержит ни одного дочернего элемента.

4. Целевой псевдокласс :target

Некоторые ссылки указывают на местоположение внутри ресурса. Этот тип ссылок заканчивается символом «решетка» #, за которым следует идентификатор якоря (так называемый идентификатор фрагмента), например https://html5book.ru/css3-flexbox/#align-content. Элемент с идентификатором фрагмента называется целевым элементом. С помощью данного псевдокласса можно стилизовать элемент, к которому перешли по ссылке на странице (навигация по странице), а также элементы, которые расположены в одном блоке и при нажатии на кнопку/ссылку сменяются/перемещаются (например, css-слайдер).

В данном примере каждой картинке задан id, а каждой ссылке — соответствующий идентификатор якоря. При нажатии на ссылку каждая картинка увеличивается до стопроцентного размера.

<div id="slideshow">
<img id="one" src="flower-1.jpg">
<img id="two" src="flower-2.jpg">
<nav>
  <a href="#one" class="current"></a>
  <a href="#two"></a>
</nav>
</div>
#slideshow img {transform: scale(0);}
#slideshow img:target {transform: scale(1);}

5. Языковой псевдокласс :lang()

Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang="fr". В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) {css-стили}.

6. Псевдокласс отрицания :not()

Функциональный селектор псевдокласса, который принимает в качестве значения простой селектор, а затем отбирает элементы, которые не содержат указанное значение аргумента. Значениями аргументов могут быть только следующие:

селекторы элемента, например, body :not(strong)

селекторы класса и идентификатора, например, p:not(.text)

селекторы псевдокласса, например, ul:not(:first-child)

селекторы атрибута, например, input:not([type="checkbox"])

7. Комбинация псевдоклассов

При стилизации элементов возможна комбинация псевдоклассов, например:

tr:nth-last-child(even):hover — добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);

h2:not(:first-of-type):not(:last-of-type) — добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.

Поделиться:

Градиент для текста

Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе WebKit-движка. Тем не менее, этим приёмом можно свободно пользоваться, а для браузеров, не поддерживающих это свойство, просто задавать цвет текста. Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.

Меняя угол градиента, а также используя повтор градиента, можно создавать интересные эффекты.

Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством
-webkit-text-fill-color: transparent, которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

Пример 1. Градиентный текст

Градиентный текст

<p class="gradient-text">Градиентный текст</p>
@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
.gradient-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  display: table;
  margin: 20px auto;
}

Пример 2. Полосатый текст

Полосатый текст

<p class="striped-text">Полосатый текст</p>
.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183D58;
  display: table;
  margin: 20px auto;    
}

Пример 3. Прозрачный текст

Прозрачный текст

<p class="transparent-text">Прозрачный текст</p>
.transparent-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: #2E2F45;
  display: table;
  margin: 20px auto;
  color: white;
  border-radius: 5px;
  mix-blend-mode: multiply;
  padding: 5px 10px;
}

Пример 4. Полосатая тень

Полосатая тень

<p class="striped-shadow">Полосатая тень</p>
.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 5. Тень «горошек»

Тень «горошек»

<p class="shadow-polka-dot">Тень "горошек"</p>
.shadow-polka-dot {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -5px -5px 0px #EF7657;
  background: radial-gradient(#9DA8A9 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 6. Градиентные границы

Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image.
За толщину рамки отвечает свойство border: 1px solid;

Градиентные границы
<div class="gradient-border">Градиентные границы</div>
.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
}

Пример 7. Градиентные границы и градиентный текст

Градиентные границы и текст
<div class="gradient-all">Градиентные границы и текст</div>
.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}

Поделиться:

Идеи для оформления заголовков на сайте

Заголовки на сайте должны привлекать внимание. По умолчанию в браузере для них установлен увеличенный размер шрифта и полужирное начертание.

Данные примеры подходят для оформления заголовков категорий, блоков сайдбара, заголовков в подвале страницы и т.п.
Некоторые заголовки требуют дополнительной разметки, остальные примеры используют только один элемент в сочетании с псевдоэлементами :before и :after.

Для заголовков я использовала шрифт Merriweather, загруженный с сайта Google Fonts.

headers
Рис. 1. Оформление заголовков на сайте

Общие стили для всех заголовков

h3 {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  letter-spacing: 1px;
  max-width: 320px;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #465457;
}

Заголовок 1

<div class="d1"><h3><span>Заголовок 1</span></h3></div>
.d1 h3 {
  color: #F16246;
  text-align: center;
}
.d1 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: #E5EDEA;
  z-index: -1;
}
.d1 span {
  background: white;
  padding: 0 20px;
}

Заголовок 2

<div class="d2"><h3><span>Заголовок 2</span></h3></div>
.d2 h3 {text-align: center;}
.d2 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 0;
  right: 0;
  height: 6px;
  border-top: 2px solid #BBC9C9;
  border-bottom: 2px solid #BBC9C9;
  z-index: -1;
}
.d2 span {
  background: white;
  padding: 0 20px;
}

Заголовок 3

<div class="d3"><h3><span>Заголовок 3</span></h3></div>
.d3 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  right: 0;
  height: 12px;
  background: #A6D8CB;
  z-index: -1;
}
.d3 span {
  background: white;
  padding: 0 15px;
  margin-left: 20px;
}

Заголовок 4

<div class="d4"><h3>Заголовок 4</h3></div>
.d4 h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid #E5EDEA; 
}
.d4 h3:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 30%;
  height: 4px;
  background: #A6D8CB;
}

Заголовок 5

<div class="d5"><h3>Заголовок 5</h3></div>
.d5 h3 {padding-top: 10px;}
.d5 h3:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 25%;
  height: 2px;
  background: #D8BD3D;
}

Заголовок 6

<div class="d6"><h3>Заголовок 6</h3></div>
.d6 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d6 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -15%;
  width: 30%;
  height: 2px;
  background: #FA5F4C;
}

Заголовок 7

<div class="d7"><h3>Заголовок 7</h3></div>
.d7 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d7 h3:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #79F8D7;
}
.d7 h3:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -15%;
  width: 30%;
  height: 2px;
  background: #79F8D7;
}

Заголовок 8

<div class="d8"><h3>Заголовок 8</h3></div>
.d8 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d8 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EE6247;
  z-index: 2;
}
.d8 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #ECF4F2;
}

Заголовок 9

<div class="d9"><h3>Заголовок 9</h3></div>
.d9 h3 {
  padding: 0 0 6px 10px;
  border-left: 10px solid #A6D8CB;
  border-bottom: 2px solid #A6D8CB;
}

Заголовок 10

<div class="d10"><h3>Заголовок 10</h3></div>
.d10 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
  border: 2px solid #cbdcea;
  color: #394671;
}
.d10 h3:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #cbdcea;
}

Заголовок 11

<div class="d11"><h3>Заголовок 11</h3></div>
.d11 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
  background: #cbdcea;
  border: 2px dashed white;
  color: white;
  box-shadow: 0 0 0 4px #cbdcea;
}

Заголовок 12

<div class="d12"><h3>Заголовок 12</h3></div>
.d12 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
}
.d12 h3:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 3px;
  z-index: -1;
  width: 20px;
  height: 25px;
  border: 4px solid #ea7e9c;
  color: #394671;
}

Заголовок 13

<div class="d13"><h3>Заголовок 13</h3></div>
.d13 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
  color: #154ffb;
}
.d13 h3:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -25px;
  z-index: -1;
  background: #fed57b;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Заголовок 14

<div class="d14"><h3>Заголовок 14</h3></div>
.d14 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
}
.d14 h3:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -25px;
  width: 30px;
  height: 20px;
  border-top: 2px solid #fed57b;
  border-left: 2px solid #fed57b;
}
.d14 h3:after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -25px;
  width: 30px;
  height: 20px;
  border-bottom: 2px solid #fed57b;
  border-right: 2px solid #fed57b;
}

Заголовок 15

<div class="d15"><h3>Заголовок 15</h3></div>
.d15 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
}
.d15 h3:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: -35px;
  width: 10px;
  height: 10px;
  border: 3px solid #fed57b;
  transform: rotate(45deg)
}
.d15 h3:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: -35px;
  width: 10px;
  height: 10px;
  border: 3px solid #fed57b;
  transform: rotate(45deg)
}

Заголовок 16

<div class="d16"><h3>Заголовок 16</h3></div>
.d16 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d16 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBDCEA;
  box-shadow: 20px 0 0 0 #CBDCEA, -20px 0 0 0 #CBDCEA;
}
.d16 h3:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FC3768;
  z-index: -1;
}

Поделиться:

bxSlider — установка, настройки, примеры

Плагин bxSlider — отзывчивый jQuery-слайдер для контента. Наличие большого количества настроек позволяет адаптировать слайдер под конкретные нужды вашего проекта.

Преимущества:

  • адаптируется под любое устройство;
  • слайды сменяются как по горизонтали, так и по вертикали, есть режим выцветания (fade);
  • слайды могут содержать изображения, видео или любое html-содержимое;
  • работает на сенсорных экранах;
  • для смены слайдов используются css-переходы, что даёт аппаратное ускорение;
  • полный API обратного вызова и открытые методы (before, after, first, last, next, prev);
  • хорошая поддержка браузерами: Firefox, Chrome, Safari, iOS, Android, IE7+.

Перейти на страницу с примерами

1. Как установить bxslider

Шаг 1. Добавьте ссылки на необходимые файлы

Скачайте архив с файлами с официального сайта. Создайте на сервере папку с названием плагина, например, bxslider. Закачайте в неё файлы jquery.bxslider.min.js и jquery.bxslider.css. Для работы плагина добавьте в раздел head ссылки на файлы в следующем порядке:
1) ссылка на файл со стилями jquery.bxslider.css. Таблицу стилей подключайте в том случае, если не собираетесь вносить изменения во внешний вид слайдера;
2) ссылка на библиотеку jQuery;
3) ссылка на файл со скриптом jquery.bxslider.min.js.

<link href="путь_к_файлу_на_вашем_сервере/jquery.bxslider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="путь_к_файлу_на_вашем_сервере/jquery.bxslider.min.js"></script>

Вместо строчки путь_к_файлу_на_вашем_сервере укажите реальный путь к файлу, хранящемуся на вашем сервере.

Если вы будете добавлять в слайдер видео или использовать функции перехода, то вам понадобятся ещё два файла из папки plugins скачанного архива: jquery.easing.1.3.js и jquery.fitvids.js.

Шаг 2. Создайте html-разметку

Создайте маркированный список с классом bxslider. Каждый элемент списка — отдельный слайд. В качестве содержимого может быть картинка, видео или другой html-контент.

<ul class="bxslider">
  <li><img src="/images/pic1.jpg"></li>
  <li><img src="/images/pic2.jpg"></li>
  <li><img src="/images/pic3.jpg"></li>
  <li><img src="/images/pic4.jpg"></li>
</ul>

Шаг 3. Вызовите bxslider

Вызовите функцию bxslider() для списка <ul class="bxslider"> с помощью jQuery.

<script>jQuery(document).ready(function(){
  jQuery('.bxslider').bxSlider();
});</script>

2. Настройки bxslider

Слайдер — это некий объект, который имеет свойства и их возможные значения. Некоторые свойства уже активизированы при инициализации (вызове) слайдера. Поэтому пользовательская настройка слайдера заключается в отмене тех или иных свойств или в добавлении новых.

Например, captions: false означает, что подписи к слайдам отключены по умолчанию. Чтобы добавить вывод подписей к слайдам, нужно задать captions: true.

2.1. Общие настройки

Для каждого свойства первое значение — значение по умолчанию, во второй строчке перечислены все возможные варианты для этого свойства.

mode — тип перехода между слайдами.

mode: 'horizontal' 
варианты: 'horizontal', 'vertical', 'fade'

speed — скорость смены слайдов

speed: 500
варианты: любое целое число

slideMargin — отступ между каждым слайдом.

slideMargin: 0
варианты: любое целое число

startSlide — индекс начального слайда (начинается с нуля).

startSlide: 0
варианты: любое целое число

randomStart — запуск слайдера с произвольного слайда.

randomStart: false
варианты: true или false

slideSelector — добавляет элемент-контейнер, который будет использоваться как слайдер.

slideSelector: ''
варианты: селектор jQuery

infiniteLoop — если задано true, при нажатии кнопки Next на последнем слайде будет осуществлён переход к первому слайду и наоборот.

infiniteLoop: true
варианты: true или false

hideControlOnEnd — если задано true, кнопка Next будет скрыта на последнем слайде и наоборот.

hideControlOnEnd: false
варианты: true или false

easing — тип перехода между слайдами. Если используются css-переходы, включаются значения transition-timing-function. Если css-переходы не используется, можно подключить плагин easing.

easing: null
варианты: 
если используется CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. 
Если используется плагин easing: 'swing', 'linear' и т.д.

captions — добавляет подписи к картинкам. Название берётся из значения атрибута title.

captions: false
варианты: true или false

ticker — бегущая строка из слайдов.

ticker: false
варианты: true или false

tickerHover — останавливает движение слайдов при наведении мышью. Не работает, если используются css-переходы.

tickerHover: false
варианты: true или false

adaptiveHeight — динамическая регулировка высоты слайдера в соответствии с высотой каждого слайда.

adaptiveHeight: false
варианты: true или false

adaptiveHeightSpeed — длительность перехода в миллисекундах при динамической регулировке высоты слайда, работает только для adaptiveHeight: true.

adaptiveHeight: 500
варианты: любое целое число

video — если какой-нибудь слайд содержит видео, установите video: true. Также подключите plugins/jquery.fitvids.js.

video: false
варианты: true или false

responsive — включает или отключает адаптивность слайдера.

responsive: true
варианты: true или false

useCSS — если задано true, для вертикальной и горизонтальной анимации слайдов будут использоваться css-переходы. В противном случае подключите плагин easing.

useCSS: true
варианты: true или false

preloadImages — если задано preloadImages:'all', все картинки будут загружены перед началом показа. В противном случае будет загружен только начальный слайд.

preloadImages: visible
варианты: 'all', 'visible'

touchEnabled — включает и отключает перелистывание слайдов пальцем для сенсорных экранов.

touchEnabled: true
варианты: true или false

swipeThreshold — количество пикселей, превышение которого выполнит переход слайдов.

swipeThreshold: 50
варианты: любое целое число

oneToOneTouch — если задано true, слайды, не использующие выцветание, будут перемещаться следом за пальцем.

oneToOneTouch: true
варианты: true или false

preventDefaultSwipeX — если задано true, сенсорный экран не будет двигаться вдоль оси X при листании слайдов пальцем.

preventDefaultSwipeX: true
варианты: true или false

preventDefaultSwipeY — если задано true, сенсорный экран не будет двигаться вдоль оси Y при листании слайдов пальцем.

preventDefaultSwipeY: false
варианты: true или false

2.2. Счётчик количества слайдов

pager — если задано true, будет выводиться индикатор количества слайдов.

pager: true
варианты: true или false

pagerType — если задано pagerType: 'full', счётчик будет содержать цифровые ссылки для каждого слайда, если задано 'short', то будет запись вида 1/5.

pagerType: 'full'
варианты: 'full', 'short'

pagerShortSeparator — тип разделителя цифр для pagerType: 'short'.

pagerShortSeparator: ' / '
варианты: любой символ

pagerSelector — регистрирует элемент-контейнер с указанным классом или идентификатором, который содержит счётчик.

pagerSelector: ''
варианты: jQuery селектор

pagerCustom — родительский элемент, используемый в качестве счётчика. Должен содержать <a data-slide-index="x"> для каждого слайда. Не используется для динамической карусели.

pagerCustom: null
варианты: jQuery селектор

buildPager — если установлен, функция вызывается на каждый слайд, возвращаемое значение используется в качестве мини-эскиза в счётчике.

buildPager: null
варианты: function(slideIndex)

2.3. Элементы управления

controls — если задано true, будут показаны элементы управления Next / Prev.

controls: true
варианты: true или false

nextText — текст, который используется для кнопки Next.

nextText: 'Next'
варианты: строка символов

prevText — текст, который используется для кнопки Prev.

prevText: 'Prev'
варианты: строка символов

nextSelector — элемент-контейнер для кнопки Next.

nextSelector: null
варианты: jQuery селектор

prevSelector — элемент-контейнер для кнопки Prev.

prevSelector: null
варианты: jQuery селектор

autoControls — если задано true, будут добавлены кнопки Start / Stop.

autoControls: false
варианты: true или false

startText — текст, который будет использоваться для кнопки Start.

startText: 'Start'
варианты: строка символов

stopText — текст, который будет использоваться для кнопки Stop.

stopText: 'Stop'
варианты: строка символов

autoControlsCombine — когда слайдшоу запущено, будет отображаться только кнопка Stop и наоборот.

autoControlsCombine: false
варианты: true или false

autoControlsSelector — элемент-контейнер для кнопок Start / Stop.

autoControlsSelector: null
варианты: jQuery селектор

2.4. Автоматический показ слайдов

auto — настраивает автоматическую смену слайдов.

auto: false
варианты: true или false

pause — количество времени в миллисекундах между каждым переходом.

pause: 4000
варианты: любое целое число

autoStart — автоматическая смена слайдов начинается при загрузке слайда. Если указано false, показ начнётся при нажатии на кнопку Start.

autoStart: true
варианты: true или false

autoDirection — направление смены слайдов (с начала или с конца).

autoDirection: 'next'
варианты: 'next', 'prev'

autoHover — автоматический показ слайдов будет остановлен при наведении мышью на слайдер.

autoHover: false
варианты: true или false

autoDelay — время задержки с миллисекундах перед запуском показа слайдов .

autoDelay: 0
варианты: любое целое число

2.5. Карусель

minSlides — минимальное количество слайдов для показа. Слайды будут уменьшены (обрезаны), если карусель станет меньше первоначального размера.

minSlides: 1
варианты: любое целое число

maxSlides — максимальное количество слайдов. Слайды будут увеличены в размере, если карусель станет больше оригинального размера.

maxSlides: 1
варианты: любое целое число

moveSlides — количество слайдов, перемещающихся вместе при смене слайда. Количество должно быть больше или равно minSlides и меньше или равно maxSlides. По умолчанию используется количество полностью видимых слайдов.

moveSlides: 0
варианты: любое целое число

slideWidth — ширина каждого слайда, обязательна для карусели.

slideWidth: 0
варианты: любое целое число

2.6. Функции обратного вызова

onSliderLoad — выполняет сразу после того, как слайдер полностью загружен.

onSliderLoad: function(){}
варианты: function(индекс текущего слайда){ // ваш код здесь }

onSlideBefore — выполняется непосредственно перед каждой сменой слайда.

onSlideBefore: function(){}
варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
принимаемые аргументы:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

onSlideAfter — функция выполняется сразу же после каждого перехода между слайдами. Аргументом функции является текущий элемент слайда (когда переход завершается).

onSlideAfter: function(){}
варианты: function($slideElement, oldIndex, newIndex){ // ваш код здесь }
arguments:
  $slideElement: jQuery элемент целевого элемента 
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

onSlideNext — функция выполняется непосредственно перед каждым переходом по кнопке Next. В качестве аргумента функция принимает следующий элемент перехода.

onSlideNext: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

onSlidePrev — функция выполняется непосредственно перед каждым переходом по кнопке Prev. В качестве аргумента функция принимает предыдущий элемент перехода.

onSlidePrev: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $slideElement: jQuery элемент целевого элемента
  oldIndex: индекс элемента предыдущего слайда (до перехода)
  newIndex: индекс конечного элемента (после перехода)

2.7. Публичные методы

goToSlide — выполняет переход между слайдами к слайду с заданным индексом (отсчёт начитается с нуля).

пример:
slider = $('.bxslider').bxSlider();
slider.goToSlide(3);

goToNextSlide — выполняет переход к следующему слайду.

пример:
slider = $('.bxslider').bxSlider();
slider.goToNextSlide();

goToPrevSlide — переход к предыдущему слайду.

пример:
slider = $('.bxslider').bxSlider();
slider.goToPrevSlide();

startAuto — запускает автоматический показ слайдов. Используйте аргумент false, чтобы предотвратить поведение кнопки от обновления.

пример:
slider = $('.bxslider').bxSlider();
slider.startAuto();

stopAuto — останавливает автоматический показ слайдов. Используйте аргумент false, чтобы предотвратить поведение кнопки от обновления.

пример:
slider = $('.bxslider').bxSlider();
slider.stopAuto();

getCurrentSlide — возвращает текущий активный слайд.

пример:
slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

getSlideCount — возвращает общее количество слайдов в слайдере.

пример:
slider = $('.bxslider').bxSlider();
var slideQty = slider.getSlideCount();

reloadSlider — обновляет слайдер. Полезно в случае добавления слайдов на лету.

пример:
slider = $('.bxslider').bxSlider();
slider.reloadSlider();

destroySlider — разрушает активный слайдер, возвращая все элементы в первоначальное состояние.

пример:
slider = $('.bxslider').bxSlider();
slider.destroySlider();

3. Примеры настройки и оформления слайдера

Таблица стилей из архива плагина задаёт однообразный и скромный вид слайдера. Воспользуйтесь вариантами ниже или поэкспериментируйте самостоятельно, чтобы украсить ваш слайдер. Для создания адаптивного слайдера необходимо поместить его разметку в блок с относительной шириной, заданной в %. Чтобы отключить текст кнопок управления Next и Prev, задайте в настройках плагина nextText: '', prevText: ''.

3.1. Пользовательские элементы управления

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
  jQuery('.bxslider').bxSlider({
  pager: false, // отключаем индикатор количества слайдов
  nextText: '', // отключаем текст кнопки Next
  prevText: '' // отключаем текст кнопки Prev
  });
});</script>

<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg" /></li>
</ul>
* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 440px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-prev, .bx-next {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: 70px;
  border-radius: 3px;
  background: white;
  text-decoration: none;
  outline: none;
  transition: .2s ease-in-out;
}
.bx-next {right: 20px;}
.bx-prev:before, .bx-next:before {
  font-size: 16px;
  color: #9a9a9a;
  font-family: "FontAwesome";
}
.bx-prev:before {content: "\f104";}
.bx-next:before {content: "\f105";}

3.2. Галерея изображений с подписями

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link href='https://fonts.googleapis.com/css?family=Comfortaa&subset=cyrillic-ext' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/plugins/jquery.easing.1.3.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
   pager: false,
   captions: true,
   nextText: '',
   prevText: '',
   useCSS: false,
   easing: 'jswing',
   speed: 500
   });
});</script>

<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg" title="Аленький цветочек"/></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg" title="Утренняя роса" /></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg" title="Букет цветов" /></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg" title="Ветка вишни" /></li>
</ul>
* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  border: 1px solid rgba(255,255,255,0.7);
  color: rgba(255,255,255,0.7);
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  transition: all ease .3s;
  z-index: 10;
  cursor: pointer;
}
.bx-prev:hover, .bx-next:hover, .bx-prev:active, .bx-next:active {
  background: #6BA7BD;
  border-color: #6BA7BD;
}
.bx-prev {left: 20px;}
.bx-next {right: 20px;}
.bx-prev:before, .bx-next:before {font-family: "FontAwesome";}
.bx-prev:before {content: "\f104";}
.bx-next:before {content: "\f105";}
.bx-caption {
  position: absolute;
  width: 50%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: .3s ease-in-out;
  padding: 2em;
  background: rgba(255,255,255,.9);
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Comfortaa', cursive;
}

3.3. Появляющиеся кнопки управления

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/plugins/jquery.easing.1.3.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
   nextText:'',
   prevText:'',
   useCSS: false,
   easing: 'jswing',
   speed: 500
   });
});</script>

<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg" /></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg" /></li>
</ul>
* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-pager {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.bx-pager-item {display: inline-block;}
.bx-pager-link {
  text-indent: -9999px;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  outline: 0;
  border: 2px solid white;
  border-radius: 50%;
}
a.active {background: white;}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  background: white;
  color: #666;
  width: 50px;
  height: 50px;
  opacity: 0;
  text-align: center;
  transition: .4s linear;
  z-index: 10;
  cursor: pointer;
}
.bx-wrapper:hover .bx-prev, .bx-wrapper:hover .bx-next, .bx-wrapper:hover .bx-prev:active, .bx-wrapper:hover .bx-next:active {opacity: 1;}
.bx-prev {left: 20px;}
.bx-next {right: 20px;}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
  font-size: 30px;
  line-height: 50px;
}
.bx-prev:before {content: "\f104";}
.bx-next:before {content: "\f105";}

3.4. Галерея изображений с миниатюрами

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ваш_сайт/bxSlider/jquery.bxslider.js"></script>
<script>jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
   nextText: '',
   prevText: '',
   pagerCustom: '#bx-pager'
});
});</script>

<div class="slider">
<ul class="bxslider">
  <li><img src="http://ваш_сайт/flower-example-10.jpg"/></li>
  <li><img src="http://ваш_сайт/flower-example-9.jpg"/></li>
  <li><img src="http://ваш_сайт/flower-example-3.jpg"/></li>
  <li><img src="http://ваш_сайт/flower-example-5.jpg"/></li>
 </ul>
<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="http://ваш_сайт/flower-example-10.jpg" /></a>
  <a data-slide-index="1" href=""><img src="http://ваш_сайт/flower-example-9.jpg" /></a>
  <a data-slide-index="2" href=""><img src="http://ваш_сайт/flower-example-3.jpg" /></a>
  <a data-slide-index="3" href=""><img src="http://ваш_сайт/flower-example-5.jpg" /></a>
</div>
</div>
* {box-sizing: border-box;}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
#bx-pager {
  margin-top: 20px;
  text-align: center;
}
#bx-pager a {margin: 0 3px;}
#bx-pager a img {
  padding: 3px;
  border: 1px solid #ccc;
  width: 80px;
  transition: .4s ease-in-out;
}
#bx-pager a.active img {border: 1px solid #D4104E;}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  background: white;
  color: #666;
  width: 30px;
  height: 80px;
  text-align: center;
  transition: .4s linear;
  z-index: 10;
  cursor: pointer;
}
.bx-prev {
  left: 0;
  border-radius: 0 5px 5px 0;
}
.bx-next {
  right: 0;
  border-radius: 5px 0 0 5px;
}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
  font-size: 30px;
  line-height: 80px;
}
.bx-next:before {content: "\f105";}
.bx-prev:before {content: "\f104";}

Поделиться: