Как сделать слайдер по центру

Добавил пользователь Дмитрий К.
Обновлено: 10.09.2024

Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:

Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.

Что понадобится?

Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.

Пишем код

На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:

Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:

Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами

Слайдер изображений - это отличный способ отображения различных изображений веб-страницы. Красивые и интересные изображения могут привлечь много посетителей на вашу веб-страницу.

Обычно слайдеры изображений создаются с помощью JavaScript, но с версией CSS3 стало возможно создать слайдеры, используя только CSS3. В этой статье вы научитесь, как можно получить эффект слайд-шоу, сохраняя минимальный код CSS, а во второй части статьи вы узнаете, как создать слайдеры изображений с помощью JavaScript.

Создание слайдеров изображений используя только CSS3

Наверно вы уже видели слайдеры, созданные с помощью JavaScript, которые очень тяжело загружаются. Они замедляют работу веб-страницы, а также могут не работать, если пользователь отключил интерпретацию JavaScript в браузере. Одно из решений этой проблеме - это отказ от их использования, но как же можно создать слайдеры без использования JavaScript? Здесь вы найдете ответ.

Slick slider — это jQuery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффекты перехода и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на устройствах с сенсорным экраном.

Подключение осуществляется следующим образом.

Примеры использования

Вызов без параметров

При вызвове без параметров получим один активный слайд с навигационными стрелками.

Несколько слайдов

Отобразим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых за раз слайдов (slidesToScroll).

Режим центрирования

Адаптивность

Здесь по умолчанию устанавливается отображение в ряд 3 слайда. Если ширина видимой области браузера от 768 до 481 пикселя — 2. И один, если ширина менее 480 пикселей.

В настройках адаптивности можно задавать любые параметры. Например, на мобильной версии сайта можно отключить стрелки навигации.

Настройки

В таблице приведены основные настройки. Полный перечень на сайте разработчика.

Параметр	Тип	Default	Описание
adaptiveHeight	boolean	false	Включает адаптирование высоты для одиночкного слайда горизонтальной карусели
autoplay	boolean	false	Автоматическая прокрутка
autoplaySpeed	int(ms)	3000	Скорость автопрокрутки в милисекундах
arrows	boolean	true	Показ/скрытие навигационных кнопок
prevArrow	html	button	Замена стандартной кнопки Preview
nextArrow	html	button	Замена стандартной кнопки Next
dots	boolean	false	Показ/скрытие навигационных точек под слайдером
draggable	boolean	true	Включает/выключает способность перелистывания слайдера перетаскиванием мышью
fade	boolean	false	Эффект затухания при перелистывании слайдов
focusOnSelect	boolean	false	Устанавливает фокус на выбранный элемент карусели при клике
easing	string	'linear'	Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов
edgeFriction	integer	0.15	Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена
infinite	boolean	true	Бесконечное прокручивание (зацикливание)
initialSlide	integer	0	Номер слайда, с которого начинать показ
lazyLoad	string	'ondemand'	Тип подгрузки слайдов. Принимает 'ondemand' или 'progressive'
pauseOnHover	boolean	true	Пауза автопроигрывания при наведении мыши
pauseOnDotsHover	boolean	false	Пауза автопроигрывания при наведении мыши на навигационные точки
pauseOnHover	boolean	true	Пауза автопроигрывания при наведении мыши
rows	int	1	Может быть 'window', 'slider' или 'min'

Методы

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

slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.

slickGoTo — переходит к слайду с указанным номером.

slickNext — прокручивает на один слайд вперёд.

slickPrev — прокручивает на один слайд назад.

slickPause — останавливает автоматическую прокрутку.

slickPlay — запускает автоматическую прокрутку.

События

Плагин 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.5. Карусель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: