WEB ДИЗАЙН

Креативные решения, совремеенные тенденции, творческий подход.

СОЗДАНИЕ САЙТОВ

Креативные решения, совремеенные тенденции, творческий подход.

ИНТЕРНЕТ МАГАЗИН

Креативные решения, совремеенные тенденции, творческий подход.

ПРОДВИЖЕНИЕ САЙТОВ

Креативные решения, совремеенные тенденции, творческий подход.

САЙТ-ВИЗИТКА

Креативные решения, совремеенные тенденции, творческий подход.

ИНТЕРНЕТ МАРКЕТИНГ

Креативные решения, совремеенные тенденции, творческий подход.

РАСКРУТКА ВКОНТАКТЕ

Креативные решения, совремеенные тенденции, творческий подход.

ЗАКАЗАТЬ ВИДЕОКЛИП

Креативные решения, совремеенные тенденции, творческий подход.

ЗАКАЗАТЬ АУДИО РОЛИК

Креативные решения, совремеенные тенденции, творческий подход.

Как сделать адаптивный (резиновый) слайдер изображений с помощью jQuery и CSS3


Раздел: Статьи | Дата: 26-09-2019, 20:54


Как сделать адаптивный (резиновый) слайдер изображений с помощью jQuery и CSS3


Прежде чем начать, скажу что нам потребуется подключить две внешних библиотеки:


  1. FlexSlider — плагин используемый разработчиками WooThemes, работает быстро без нареканий. Вы можете скачать плагин отдельно с официального сайта или все вместе с исходниками в конце статьи.

  2. Библиотека jQuery — ее мы подключим непосредственно из репозитория Google.

Шаг 1 — Разметка структуры HTML


Итак, начнем с html разметки слайдера. Создаем блок с классом «flex-container» внутри создадим еще один блок с классом “flex-slider” в котором будут размещены все элементы управления слайдером. Последнее что нужно будет сделать по разметке, — это создать упорядоченный список в который мы и будем добавлять наши изображения слайдов. Каждый слайд должен быть внутри элемента списка.










  • Попробуйте изменить размер окна



Далее подключаем библиотеку jQuery и FlexSlider плагин


Шаг 2 — Основные стили


Создадим основной файл стилей в котором будут прописаны все стили для нашего слайдера, я назвал файл slider.css


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


.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider a img { outline: none; border: none; }
.flexslider {
margin: 0;
padding: 0;
}

Идем далее: исключим показ слайдов изображений которые находятся вне основной области просмотра, и настраиваем стили самих слайдов (автомасштабирование и закругленная рамка).


.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Добавляем стиль который «чистит» последующие положения слайдов


.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }

Шаг 3 — Стили для слайдера


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


.flexslider {
position: relative;
zoom: 1;
padding: 10px;
background: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}

Я установил минимальную и максимальную ширину для слайдера. Вы можете сами настроить параметры под ваши требования.

Параметр zoom устанавливаем 1, это позволит избежать проблем изменения размера в браузерах на мобильных устройствах.


.flex-container {
min-width: 150px;
max-width: 960px;
}
.flexslider .slides { zoom: 1; }

Шаг 4 — Кнопки навигации < >


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


.flex-direction-nav a {
display: block;
position: absolute;
margin: -17px 0 0 0;
width: 35px;
height: 35px;
top: 50%;
cursor: pointer;
text-indent: -9999px;
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
}

Добавляем изображения стрелок с помощью псевдо-селекторов “:before” и “:after”. Исходники всех изображений используемых в уроке находятся в архиве в папке img. Вы можете поменять изображения на свое усмотрение.


.flex-direction-nav a:before {
display: block;
position: absolute;
content: '';
width: 9px;
height: 13px;
top: 11px;
left: 11px;
background: url(../img/arrows.png) no-repeat;
}
.flex-direction-nav a:after {
display: block;
position: absolute;
content: '';
width: 0;
height: 0;
top: 35px;
}

Добавим небольшой 3D эффект к кнопкам в виде ленты (кнопки уходят на задний план за слайдер).


.flex-direction-nav .flex-next {
right: -5px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.flex-direction-nav .flex-prev {
left: -5px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
.flex-direction-nav .flex-next:after {
right: 0;
border-bottom: 5px solid transparent;
border-left: 5px solid #31611e;
}
.flex-direction-nav .flex-prev:after {
left: 0;
border-bottom: 5px solid transparent;
border-right: 5px solid #31611e;
}

Шаг 5 — Кнопки управления под слайдером


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


.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: -40px;
text-align: center;
margin: 0 0 0 -10px;
}
.flex-control-nav li {
display: inline-block;
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 9;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
box-shadow: inset 0 0 0 2px #b6b6b6;
}
.flex-control-paging li a.flex-active {
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Шаг 6 — Подписи к изображениям


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


.flexslider .slides p {
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 0 5px;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
line-height: 20px;
color: white;
background-color: #222222;
background: rgba(0,0,0, .9);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Заключение


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



Смотреть Демо
Скачать Исходникискачать dle 12.1