ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер для сайта с помощью Pure CSS3

Слайдер для сайта с помощью Pure CSS3

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

Здесь 3D-преобразованиями, который отлично будет вписываться как под светлый формат, так и под темный его выстроит не займет времени, хотя по умолчанию идет на белый фон. Если говорить об основной характеристике, то слайдер создан с CSS3 и HTML5, где есть существенный плюс, в нем не используется ни одна строка javascript или jquery. Этот слайдер очень прост в реализации и модификации, как и по установке на главную страницу или отдельную, смотря какая тематическая площадка, но если высказываться, то уже говорил, что на интернет магазине он бы не просто отлично смотрелся, просто по теме был установлен.

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

Так смотрится с тестовой площадки:

Особенности:

1. Чистые CSS3 3D-преобразования;
2. Частично отзывчивый;
3. Чистый HTML5 + CSS3 - Нет изображений, не зависит от значков;
4. Чистый CSS3 с событием click;
5. До 5 изображений;
6. Cross-Browser IE8 +, Firefox, Safari, Opera, Chrome - Android + IOS;
7. Чистый и хорошо прокомментированный код HTML5 и CSS3;
6. Очень гибкий и простой в использовании;

Совместимые браузеры:

- Internet Explorer 7+
- Firefox 2+
- Chrome 1+
- Safari 3+
- Opera 10+

HTML

Код

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="captioned-gallery">
  <figure class="slider">
  <figure>
  <img src="hobbiton-lake.jpg" alt>
  <figcaption>Hobbiton, New Zealand</figcaption>
  </figure>
  <figure>
  <img src="wanaka-drowned-tree.jpg" alt>
  <figcaption>Wanaka, New Zealand</figcaption>
  </figure>
  <figure>
  <img src="utah-peak.jpg" alt>
  <figcaption>Utah, United States</figcaption>
  </figure>
  <figure>
  <img src="bryce-canyon-utah.jpg" alt>
  <figcaption>Bryce Canyon, Utah, United States</figcaption>
  </figure>
  <figure>
  <img src="hobbiton-lake.jpg" alt>
  <figcaption>Hobbiton, New Zealand</figcaption>
  </figure>
  </figure>
</div>

CSS

Код

@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}
body, figure {
  margin: 0; background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 100%; overflow: hidden;
}
figure.slider {
  position: relative; width: 500%;
  font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
  width: 20%; height: auto;
  display: inline-block; position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
  position: absolute; bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem;
}

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

Но такие инструменты, как CSS Slider, вероятно упростили работу, так как большая функциональность на нем будет и навигация на сайте намного станет лучше, что для пользователя или гостей это также важная часть, чтоб как можно быстро найти тот материал, что им нужно.

PS - все для установки находится в архиве, что прикреплен к материалу, что нужно скачать.

Демонстрация

28 Мая 2018 Загрузок: 4 Просмотров: 1342 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 02 Июня 2018 00:28¹ 0 К первому слайдеру не прикрепил файл, что сейчас сменил на адаптивный, что можно поставить на размер или на весь экран. По этому слайдеру в полном объеме написано на форуме, где расклад идет по всем элементам и эффектам, что присутствуют на материале. Перейти на форум