ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный слайдер с миниатюрами на CSS

Адаптивный слайдер с миниатюрами на CSS

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

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

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

Все проверено на работоспособность, где при открытии увидите такой обзор с широкого монитора.

Слайдер на CSS3

Далее только можно предположить, как планшет.

Как сделать простой слайдер на JavaScript

Это уже вид просматривается самого небольшого экрана, сто выходит в интернет соединение.

Резиновый слайдер css

Приступаем к установке:

HTML

Код
<div class="matisdas">
  <div class="gostenab-kamakeng">
  <img class="dascoding" src="http://zornet.ru/ABVUN/Abas/degakolas/wallpapers-castles-31.jpg">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/1387999899_zimnyaya-skazka-24.jpg">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/0_a890d_ca9b3c15_orig.jpg">
  </div>
  <nav class="gostenab-kamakeng-nav">
  <ul>
  <li class="arrow">
  <a class="previous">
  <span>
  <i class="ion-arrow-left-c"></i>
  </span>
  </a>
  </li>
  <li class="arrow">
  <a class="next">
  <span>
  <i class="ion-arrow-right-c"></i>
  </span>
  </a>
  </li>
  </ul>
  </nav>
</div>

CSS

Код
.matisdas {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
}

a {
  color: #e6e5f5;
  text-decoration: none;
  font-size: 35px;
  padding: 20px 5px;
}

a span i {
  position: relative;
  display: block;
  cursor: pointer;
  outline: 0;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

a.previous span:hover i {
  -webkit-transform: translateX(-10px) scale(1.2);
  -moz-transform: translateX(-10px) scale(1.2);
  transform: translateX(-10px) scale(1.2);
}

a.next span:hover i {
  -webkit-transform: translateX(10px) scale(1.2);
  -moz-transform: translateX(10px) scale(1.2);
  transform: translateX(10px) scale(1.2);
}

.gostenab-kamakeng-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.gostenab-kamakeng-nav li {
  -webkit-box-flex: 2;
  flex: 2;
  text-align: center;
  display: -webkit-box;
  display: flex;
}

img {
  max-width: 100%;
  display: none;
  -webkit-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
  -moz-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
  box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}

img.dascoding {
  display: block;
  -webkit-animation: fadeImg 0.8s;
  -moz-animation: fadeImg 0.8s;
  animation: fadeImg 0.8s;
}

.gostenab-kamakeng-nav .arrow {
  flex: 0 0 15%;
}

.gostenab-kamakeng-nav a {
  flex-basis: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.gostenab-kamakeng-nav span {
  display: block;
  width: 100%;
}

@-webkit-keyframes fadeImg {
  from {
  opacity: 0;  
  }

  to {
  opacity: 1;
  }
}

@-moz-keyframes fadeImg {
  from {
  opacity: 0;  
  }

  to {
  opacity: 1;
  }
}

@keyframes fadeImg {
  from {
  opacity: 0;
  }

  to {
  opacity: 1;
  }
}

JS

Код
const items = document.querySelectorAll('img');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
let count = 0;

function showNextItem() {
  items[count].classList.remove('dascoding');

  if(count < itemCount - 1) {
  count++;
  } else {
  count = 0;
  }

  items[count].classList.add('dascoding');
  console.log(count);
}

function showPreviousItem() {
  items[count].classList.remove('dascoding');

  if(count > 0) {
  count--;
  } else {
  count = itemCount - 1;
  }

  items[count].classList.add('dascoding');
  console.log(count);
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);

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

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

Демонстрация
04 Февраля 2019 Загрузок: 3 Просмотров: 2673 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar