СЛАЙДЕР С КРАСИВЫМ ПЕРЕХОДОМ


Привлекательный и простой адаптивный слайдер. Настроить вы сможете его под свои требования. Не использует библиотеку jQuery. Он имеет автоматический показ слайда и смену слайдов при клике по навигации. Установка проста. Скопировать код HTML и вставить туда где вам нужно его отобразить. Далее копируем код CSS и вставляем в ваш файл стилей. Его вы можете отредактировать под свои требования. Ну с JS делаем тоже самое. 



HTML



Код
<p><code><div class="container" id="container"> 

  <div class="caption" id="slider-caption"> 

  <div class="caption-heading"> 

  <h1>Lorem Ipsum</h1> 

  </div> 

  <div class="caption-subhead"><span>dolor sit amet, consectetur adipiscing elit. </span></div> 

  <a class="btn" href="#">Sit Amet</a> 

  </div> 

  <div class="left-col" id="left-col"> 

  <div id="left-slider"></div> 

  </div> 

  <ul class="nav"> 

  <li class="slide-up"><a href="#"> < </a></li> 

  <li class="slide-down"><a id="down_button" href="#"> > </a></li> 

  </ul> 

</div></code></p>






CSS


Код

<p><code>.caption { 

  position: absolute; 

  top: 50%; 

  left: 8rem; 

  z-index: 9; 

  transform: translateY(-50%); 

  opacity: 0; 

  transition: 500ms ease opacity, 500ms ease transform; 

  transform: translateY(60px); 





.caption.current-caption { 

  transition-delay: 1000ms; 

  opacity: 1; 

  transform: translateY(0); 





.caption.previous-caption { 

  transform: translateY(-60px); 





.caption .caption-heading { 

  transition: 500ms ease-in all; 





.caption .caption-heading h1 { 

  font-size: 4rem; 

  margin-bottom: 1.5rem; 

  text-transform: uppercase; 

  text-indent: -0.2rem; 

  letter-spacing: .2rem; 

  font-weight: 300; 





.caption .caption-subhead { 

  font-size: 1rem; 

  font-weight: 300; 

  text-transform: uppercase; 

  color: white; 

  letter-spacing: 4px; 

  word-spacing: .1rem; 

  margin-bottom: 2.5rem; 

  display: block; 





.caption a.btn { 

  color: #333; 

  font-size: 0.8rem; 

  text-decoration: none; 

  background-color: white; 

  padding: .5rem 1rem; 

  text-transform: uppercase; 

  letter-spacing: .2rem; 

  position: relative; 

  z-index: 9; 

  transition: 250ms ease-in background-color, 500ms ease-in color; 





.caption a.btn:hover { 

  background-color: black; 

  color: white; 





.container { 

  width: 100%; 

  height: 100vh; 

  background-color: #2C302E; 

  display: flex; 

  position: relative; 





.left-col, 

.right-col { 

  width: 100%; 

  box-sizing: border-box; 

  height: calc(100% - 4rem); 

  overflow: hidden; 





.left-col { 

  background-size: cover; 

  background-postion: center top; 

  overflow: hidden; 

  margin: 2rem; 

  position: relative; 





.left-col .slide { 

  filter: grayscale(100%); 

  position: absolute; 

  width: 100%; 

  height: 100%; 

  background-position: left top !important; 

  background-size: cover !important; 

  background-repeat: no-repeat; 

  opacity: 0; 

  transition: 1000ms cubic-bezier(1, 0.04, 0.355, 1) transform, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) clip-path; 

  transform: translateY(-100%); 

  scale: 1; 

  z-index: -1; 





.left-col .slide.previous { 

  z-index: 1; 

  opacity: 1; 

  transform: translateY(0); 

  animation-delay: 1s; 

  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); 

  transition: 3s ease transform; 

  will-change: transform; 





.left-col .slide.previous.change { 

  transform: translateY(50%); 





.left-col .slide.next { 

  transform: translateY(-100%); 

  z-index: 3; 

  opacity: 1; 

  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); 





.left-col .slide.current { 

  opacity: 1; 

  transform: translateY(0) scale(1.25); 

  z-index: 2; 

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 





.right-col { 

  display: flex; 

  align-items: center; 

  justify-content: center; 





.right-col .preview { 

  max-width: 400px; 





.nav { 

  display: block; 

  position: absolute; 

  top: 0; 

  left: 0; 

  width: 100%; 

  height: 100%; 

  z-index: 6; 

  overflow: hidden; 





.nav a { 

  color: #fafafa; 

  font-size: 3rem; 

  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); 





.nav:hover .slide-up, 

.nav:hover .slide-down { 

  opacity: .5; 

  transform: translateX(0); 





.nav .slide-up, 

.nav .slide-down { 

  display: block; 

  position: absolute; 

  text-align: center; 

  padding: 1rem; 

  opacity: 0; 

  transition: .25s ease opacity, .25s ease transform; 

  z-index: 99; 





.nav .slide-up:hover, 

.nav .slide-down:hover { 

  opacity: 1; 





.nav .slide-up a, 

.nav .slide-down a { 

  text-decoration: none; 

  font-weight: 300 !important; 





.nav .slide-up { 

  top: 50%; 

  left: 0; 

  transform: translateX(-100%); 





.nav .slide-down { 

  top: 50%; 

  right: 0; 

  transform: translateX(100%); 

}</code></p>






JS



Код

<p><code>let slide_data = [{ 

  'src': 'https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&s=d40582dbbbb66c7e0812854374194c2e&auto=format&fit=crop&w=1050&q=80', 

  'title': 'Slide 1', 

  'copy': 'DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.' 

  }, 

  { 

  'src': 'https://images.unsplash.com/photo-1496309732348-3627f3f040ee?ixlib=rb-0.3.5&s=4d04f3d5a488db4031d90f5a1fbba42d&auto=format&fit=crop&w=1050&q=80', 

  'title': 'Slide 2', 

  'copy': 'DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.' 

  }, 

  { </code></p>

<p> </p>


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

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

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

Информация