В этой статье мы рассмотрим, как можно настроить базовый слайдер с помощью библиотеки jQuery. Мы будем использовать библиотеку bxSlider, которая построена поверх jQuery и предоставляет множество опций конфигурации для настройки слайдера.
В настоящее время слайдер изображений является обязательной функцией — картинка стоит тысячи слов!
Как только вы решили, что собираетесь установить базовый слайдер, возникает следующий вопрос: каков именно процесс его создания? Конечно, первым требованием является сбор изображений высокого качества с высоким разрешением.
Далее, вы знаете, что вы собираетесь использовать HTML и некоторые интересные JavaScript-вещи для создания слайдера изображений. В Интернете доступно множество библиотек, позволяющих создавать слайдер различными способами. Мы будем использовать библиотеку bxSlider с открытым исходным кодом.
Библиотека bxSlider поддерживает отзывчивость, поэтому слайдер, созданный с использованием этой библиотеки, адаптируется к любому устройству. Я уверен, что вы знаете, как важно в настоящее время создать веб-сайт, который реагирует и адаптируется к различным устройствам. Таким образом, отзывчивость является обязательной функцией, когда вы выбираете стороннюю библиотеку для создания слайдеров.
В следующем разделе мы начнем изучать основы библиотеки bxSlider и процесс установки. Двигаясь дальше, мы создадим реальный пример, который продемонстрирует использование библиотеки bxSlider. И наконец, мы рассмотрим несколько важных параметров, поддерживаемых библиотекой bxSlider, которые позволяют настраивать ползунок в соответствии с вашими требованиями.
Что такое bxSlider?
Если вы ищете слайдеры контента на основе jQuery, bxSlider — одна из лучших и самых простых библиотек, которая позволяет очень легко создавать слайдеры контента и изображений.
Давайте кратко рассмотрим возможности, которые он предоставляет:
- Это полностью отзывчивый и адаптивный для всех типов устройств.
- Он поддерживает различные режимы отображения, такие как горизонтальный, вертикальный и затухающий режимы. Об этом мы поговорим позже в статье.
- Содержимое слайда может быть любым: изображение, видео или текст HTML.
- Поддерживает все популярные браузеры.
- Он предоставляет различные параметры конфигурации, которые позволяют настроить слайдер в соответствии с вашими требованиями.
- И последнее, но не менее важное: его легко реализовать, как мы увидим в следующем разделе.
Теперь давайте посмотрим на процесс установки библиотеки bxSlider. В этой статье я собираюсь использовать URL-адреса CDN для загрузки необходимых файлов JavaScript и CSS, но, конечно, вы всегда можете скачать или клонировать эти файлы из официального репозитория bxSlider GitHub .
Включить файлы JavaScript и CSS
Первое, что вам нужно сделать, это включить необходимые файлы JavaScript и CSS в ваш HTML-файл, как показано в следующем фрагменте.
|
1
2
3
|
<link rel=»stylesheet» href=»https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css»>
<script «text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script>
<script «text/javascript» src=»https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js»></script>
|
Вы можете включить приведенный выше код в <head> вашего HTML-документа. Как видите, я загрузил необходимые файлы с CDN URL. Если вы загрузили эти файлы для своего проекта, вам необходимо указать правильный путь для каждого файла.
Настройте содержимое слайдера
В этом разделе мы увидим, как вы можете настроить содержимое слайдера в своем HTML-файле.
Давайте посмотрим на следующий фрагмент.
|
1
2
3
4
5
|
<div class=»slider»>
<div>Slide One</div>
<div>Slide Two</div>
<div>Slide Three</div>
</div>
|
В приведенном выше примере мы настроили три слайда, чтобы вращаться между ними при инициализации слайдера. Важная вещь, которую следует отметить в приведенном выше фрагменте, — это класс CSS, который предоставляется в основном элементе <div> . На данный момент мы использовали slider качестве нашего CSS-класса, поэтому мы будем использовать это значение при настройке bxSlider.
Конечно, вы можете использовать любой контент, а не только текст. Мы вернемся к этому в следующем разделе, когда рассмотрим, как создать полный слайдер изображений. Сейчас вам просто нужно записать класс CSS, который мы предоставили в основном элементе <div> .
Инициализировать bxSlider
Пока что мы включили необходимые библиотечные файлы и настроили HTML-контент для нашего слайдера. Осталось только инициализировать bxSlider, чтобы преобразовать наш статический HTML-контент в необычно выглядящий вращающийся слайдер!
Давайте посмотрим на фрагмент, чтобы инициализировать наш слайдер.
|
1
2
3
4
5
|
<script>
$(document).ready(function(){
$(‘.slider’).bxSlider();
});
</script>
|
Это код JavaScript, поэтому вы также можете поместить его в <head> . Или вы можете поместить его чуть выше </body> в нижней части HTML-файла, чтобы JavaScript-код запускался после завершения загрузки остальной части вашей страницы. Если вы предпочитаете помещать его в <head> , вам нужно обязательно поместить его после того, как вы загрузите необходимые файлы JavaScript и CSS.
Как видите, мы использовали Класс CSS slider для инициализации нашего слайдера.
И с помощью этих трех простых шагов вы создали адаптивный слайдер, используя библиотеку bxSlider на основе jQuery!
В следующем разделе мы расширим то, что мы обсуждали до сих пор, и попробуем создать слайдер, используя различные параметры конфигурации, предоставляемые библиотекой bxSlider.
Создайте пример из реального мира
В предыдущем разделе мы обсуждали, как настроить базовый слайдер с помощью библиотеки bxSlider. В этом разделе мы рассмотрим пример из реальной жизни, который демонстрирует, как вы можете создать вращающийся слайдер изображений для своего веб-сайта.
Под корнем документа создайте файл HTML, который содержит следующий фрагмент.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<body>
<head>
<link rel=»stylesheet» href=»https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css»>
<script «text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script>
<script «text/javascript» src=»https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js»></script>
</head>
<div class=»slider»>
<div><img src=»/path/to/image1.jpg» title=»Title of image1″></div>
<div><img src=»/path/to/image2.jpg» title=»Title of image2″></div>
<div><img src=»/path/to/image3.jpg» title=»Title of image3″></div>
</div>
<script>
$(‘.slider’).bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 800,
mode: ‘fade’,
captions: true,
speed: 1000
});
</script>
</body>
</html>
|
И с этой настройкой ваше слайд-шоу должно выглядеть примерно так.
Код в приведенном выше примере должен выглядеть знакомо. Это очень похоже на то, что мы уже обсуждали. Единственное, что отличается, это то, что мы инициализировали наш слайдер с несколькими опциями конфигурации, поддерживаемыми библиотекой bxSlider. Давайте внимательно посмотрим на этот фрагмент.
|
1
2
3
4
5
6
7
8
9
|
$(‘.slider’).bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 800,
mode: ‘fade’,
captions: true,
speed: 1000
});
|
Параметр autoControls
Параметр autoControls добавляет элементы управления, которые позволяют пользователям запускать и останавливать слайд-шоу. По умолчанию для него установлено значение false , поэтому, если вы хотите отобразить элементы управления, вам нужно явно установить для него значение true .
auto Параметр
Параметр auto позволяет автоматически запускать слайд-шоу при загрузке страницы. По умолчанию установлено значение false .
Параметр pager
Параметр pager добавляет пейджер в слайд-шоу.
Параметр slideWidth
Параметр slideWidth позволяет установить ширину слайд-шоу. Если вы используете horizontal опцию для слайд-шоу, этот параметр является обязательным.
Параметр mode
Параметр mode позволяет настроить тип перехода между слайдами. У вас есть три варианта на выбор — horizontal , vertical и fade . В приведенном выше примере мы использовали опцию fade , поэтому вы увидите эффект затухания при переключении с одного слайда на другой.
Параметр captions
Параметр captions используется, если вы хотите отображать заголовок с каждым слайдом. Заголовки извлекаются из атрибута title элемента изображения. Как видите, мы предоставили атрибут title для всех изображений в нашем примере.
Параметр speed
Параметр speed позволяет вам настроить длительность слайд-перехода, и он устанавливается в миллисекундах. В нашем примере мы установили его на 1000 , поэтому слайды будут вращаться каждую секунду.
У bxSlider есть множество других опций конфигурации — вы можете узнать о них в официальной документации по опциям bxSlider . Продолжайте изучать различные варианты, доступные в библиотеке bxSlider. Он также предлагает множество возможностей настройки с помощью методов обратного вызова JavaScript.
Вывод
Сегодня мы обсудили, как вы можете настроить базовый слайдер, используя библиотеку jQuery. В демонстрационных целях мы выбрали библиотеку bxSlider, которая построена поверх библиотеки jQuery. Мы также создали реальный пример, используя различные параметры конфигурации, предоставляемые библиотекой bxSlider.
Если вы работали с библиотеками слайдеров на основе jQuery, я хотел бы услышать от вас! Не стесняйтесь поделиться своими мыслями, используя канал ниже.