Дата и время публикации : 03 Июня 17 в 03:14 | Раздел : Прочее для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 03 Июня 17, Суббота, 03:14 |
| Размер файла | 600.4 Kb |
| Адапт. дизайн | |
| Обновления | Не производились |
| Просмотрен | 753 |
| Загружен | 14 |
Простая, адаптивная карусель изображений.
Ранее мы не раз экспериментировали с изображениями. Сегодня мы применим накопленный опыт и создадим адаптивный слайдер изображений.
Структура HTML
Структура состоит из ненумерованного списка (ul.cd-slider), в который поместим слайды, и два дополнительных элемента списка (ul.cd-slider-navigation и ol.cd-slider-controls) для элементов навигации.
Каждый элемент списка ul.cd-slider будет состоять из svg (для изменения области обрезки слайд-изображения) и элемента (идентификатор атрибута обрезаемого элемента ).
<div>
<ul data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
<li>
<div>
<svg viewBox="0 0 1400 800">
<title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-1">
<path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
</clipPath>
</defs>
<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
</svg>
</div> <!-- .cd-svg-wrapper -->
</li>
<li>
<div>
<svg viewBox="0 0 1400 800">
<!-- svg content here -->
</svg>
</div> <!-- .cd-svg-wrapper -->
</li>
<!-- other list items here -->
</ul> <!-- .cd-slider -->
<ul>
<li><a href="#0">Next</a></li>
<li><a href="#0">Prev</a></li>
</ul> <!-- .cd-slider-navigation -->
<ol>
<li><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<!-- other list items here -->
</ol> <!-- .cd-slider-controls -->
</div> <!-- .cd-slider-wrapper -->
Стили
Структура слайдера предельно проста: к каждому слайду выставлен opacity: 0, позиция: absolute (top: 0 и left:0). Класс .visible будет добавляться к активному слайду, а .is-animating присваивается к тому элементу который анимируется в данный момент времени (z-index: 3, что поместит поверх элемента li.visible).
Обработка событий
Для реализации анимации мы задействуем атрибут 'd' элемента , входящего в .
Далее определим значение атрибута data-stepn элемента .cd-slider, равный значению атрибута 'd' (чтобы было проще взаимодействовать через JavaScript).
Сама анимация реализуется при вызове функции animate().
Вдобавок автор реализовал перелистывание изображений посредством нажатия клавиш, а также тач-жестов.
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияНовая красивая форма авторизации пользователей для сайтов на uCoz. Довольно необычная реализация и красивый дизайн. Цветовую схему и фоновое изобра...
