CSS слайдер изображений с эскизами | XoZblog - Уроки и статьи по созданию сайта, блога

Здравствуйте, уважаемые читатели XoZbloga! Сегодня разберем на практическом примере использование CSS3 transitions, которое позволяет изменить свойство CSS плавно и в течение некоторого времени. А именно на примере создания простого слайдера изображений с эскизами. Благодаря CSS3 можно добиться следующего равновесия — кода минимум, а действий максимум.

В результате получим вот такой слайдер.

Концепция

Концепция довольно проста. Все эскизы (миниатюры изображений) располагаются в ряд сверху над основным изображением. При наведении на миниатюры в область основного изображения выезжает большое изображение.

К сожалению с помощью CSS нельзя сделать два блока div, и расположить в ниж изображения. Поэтому без HTML не куда. В один блок div поместим эскизы в другой основное изображение.

HTML разметка

Для создания слайдера нам понадобятся 8 изображений: 4 миниатюры и 4 больших изображения. В коде это будет выглядеть вот так:

1
2
3
4

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

Таким образом для всех четырех изображений страница примет следующий вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

С HTML на этом все, теперь пришло время перейти к CSS. А для новичков будет полезно знать о том, как создать свой сайт.

Стили для контейнера

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

После этого, установить высоту и ширину контейнера. Это не случайные числа, ширину и высоту тщательно рассчитываем. Каждый эскиз изображения 200px широкий, их четыре итого 800px, а также промежутки (4 * 40). Таким образом ширина контейнера равен 960px. Высота контейнера, миниатюра 200px высотой, большое изображение 400px плюс промежутки, всего 660px.

1
2
3
4
5
6
7

.container {
position: relative;
height: 660px;
width: 960px;
overflow: hidden;
margin: 0 auto;
}

Также устанавливаем свойство overflow:hidden, таким образом отображается только область внутри элемента, остальное будет скрыто.

Расположение

Пришло время структурировать элементы внутри контейнера. Разберем один из трех вариантов движения слайда. Когда большое изображение появляется снизу.

Так как у родительского элемента .container установлено относительное позиционирование, для большого изображения определяем абсолютное, чтобы отсчет велся от края родительского элемента. Отступ сверху, для большого изображения равен 900px, таким образом поглощается 660px высоты контейнера и еще остается запас на движение анимации. То есть мы сразу сдвигаем вниз изображение за рамки контейнера, а уже после при наведении уменьшаем до 260px этот отступ и изображение выезжает (об этом ниже).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.container a {
float: left;
margin: 20px;
}

.big {
position: absolute;
top: 900px;
left: 20px;

-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}

Ну и конечно устанавливаем CSS3 transitions, которое позволяет назначить изменение свойства top плавно и в течение 1 секунды. Конструкция свойства следующая transition: < transition-property > < transition-duration > < transition-timing-function > < transition-delay >; где:

transition-property	Свойство, к которому применяем анимацию	Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration	Длительность анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function	Временная функция, используемая для анимации	ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay	Задержка анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Стили наведения

Теперь, когда мы установили все большие изображения вне контейнера, а точнее сдвинули их намного ниже. При наведении на эскиз большое изображение должно вернуться появится снизу и встать на место. Это достигается путем установления отступа сверху в 260 пикселей top: 260px;, а всю работу на себя берет transitions описанный выше. Также добавим легкую тень для эскиза .thumb, при наведении на него курсора мыши.

1
2
3
4
5
6
7
8
9

.container a:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

.container a:hover .big {
top: 260px;
}

По аналогии строятся и остальные эффекты скольжения: справа и слева. Хочется заметить, что для фонового изображения применяется свойство z-index.

1
2
3
4
5

.featured {
top: 260px;
left: 20px;
z-index: -3;
}

Как видно z-index отрицательный. Это сделано для того чтобы, фоновое изображение не перекрывало основное, а как бы являлось самым нижнем слоем.

На этом все. Если Вы знаете иные способы организовать подобный эффект, жду комментариев.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или следите за мной в Twitter. Если урок Вам понравился и пригодился сделайте tweet или like — поделитесь с друзьями 🙂

Источник статьи/урока: https://xozblog.ru

По материалам: http://designshack.net/articles/css/thumbslider/

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Просмотр демо страницы и скачивание исходников не доступно

Концепция

HTML разметка

Стили для контейнера

Расположение

Стили наведения