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

В данном уроке мы рассмотрим как создать простой но при этом адаптивный слайдер изображений для сайта. Для создания подобного слайдера нам понадобится плагин FlexSlider все остальное мы оформим с помощью стилей CSS3. И так, давайте приступим. 

Шаг 1. HTML

Как всегда мы начинаем с разметки, для этого мы создадим <div> с классом “flex-container”, далее внутри этого мы добавим еще один <div> с классом “flex-slider”, все это мы оформляем в неупорядоченный список, вот что получилось.

Далее мы будем подключать FlexSlider плагин. Чтобы загрузить слайдер, необходимо в html документ добавить следующий код. 

Все настройки плагина смотрим по ссылке указанной выше. После того как с разметкой мы закончили, мы переходим к следующему шагу.

Как создать адаптивный слайдер изображений

Шаг 2. CSS

Для начала добавляем сброс стилей, чтобы очистить сценарии, для правильного отображения во всех браузерах.

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

Для контейнера мы установим белый цвет фона и добавим небольшую тень, используя CSS3 свойство «box-shadow». Затем мы добавим отступы в 10px и закругленные углы.

Я установил минимальную и максимальную ширину для слайдера. Возможно, вам придется изменить или удалить этот параметр при реализации Вашего проекта. Мы установим масштаб на значении к 1, это позволит избежать изменения размера на мобильных браузерах.

Для «следующей» и «предыдущей» кнопок мы будем добавлять зеленый градиент CSS3. Чтобы выровнять кнопки вертикально, мы должны позиционировать их 50% от верхнего отступа и добавим в половину ширины кнопки.

Стрелки будут добавлены с помощью «:before« псевдо-селектора. Этот псевдо-селектор позволяет включить некоторыей контент без добавления новых тегов в HTML.

Чтобы закончить работу с кнопками нам необходимо добавить закругленные углы, также добавим свойство «triangles», который сделает эффект ленты для кнопок.

Теперь добавим маленькую навигацию в низу слайдов, которые позволяют щелкнуть на нужном слайде. Создадим круги с помощью «border-radius» и «box-shadow» собственность.

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

Я надеюсь, что вы найдете данный урок полезным ведь в нем вы узнали, возможно, что-то новое. Не стесняйтесь использовать данный слайдер в ваших следующий проектах или на персональном сайте.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.