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

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

Адаптивный Flexslider слайдер на CSS
Вашему вниманию удобный по своим функциям и адаптивный слайдер - FlexSlider. По дизайну выполнен в простом стиле, что подойдет на многие темы. Сейчас трудно представить современный интернет ресурс, на котором бы не находился слайдер. Что устанавливают под самую актуальную информацию, но больше на таких тематических площадках, такие как просмотр кино или интернет магазин и также услуги.

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

Ниже приведены HTML, CSS и JavaScript, чтобы добавить эту функцию на ваш сайт.

Первым делом подключаем кнопки:


HTML

Код
<div class="container">
  <div class="slider">
  <img class="active" src="Ссылка на первое изображение">
  <img src="Ссылка на второе изображение">
  <img src="Ссылка на третье изображение">
  </div>
  <nav class="slider-nav">
  <ul>
  <li class="arrow">
  <button class="previous">
  <span>
  <i class="ion-arrow-left-c"></i>
  </span>
  </button>
  </li>
  <li class="arrow">
  <button class="next">
  <span>
  <i class="ion-arrow-right-c"></i>
  </span>
  </button>
  </li>
  </ul>
  </nav>
</div>

CSS

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

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 20px 5px;
  font-size: 2rem;
  color: #0c3e63;
}

button span {
  position: relative;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

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

.next:hover span {
  transform: translateX(10px) scale(1.2);
}

.slider-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.slider-nav li {
  display: flex;
  flex: 2;
  text-align: center;
}

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

img.active {
  display: block;
  animation: fadeImg 0.8s;
}

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

.slider-nav a {
  flex-basis: 100%;
  display: flex;
  align-items: center;
}

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

@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('active');

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

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

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

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

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

function keyPress(e) {
  e = e || window.event;
   
  if (e.keyCode == '37') {
  showPreviousItem();
  } else if (e.keyCode == '39') {
  showNextItem();
  }
}

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

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

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

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

Демонстрация
30 Сентября 2019 Загрузок: 1 Просмотров: 1085 Комментариев: (0)

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

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

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

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