ZorNet.Ru — сайт для вебмастера » HTML и CSS » Легкий адаптивный образ слайдера для сайта

Легкий адаптивный образ слайдера для сайта

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

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

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

Все идет от широкого монитора, до самого малого экрана.

1.

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

HTML

Код

<header class="satevtunoda">
  <h1>Responsive Image kilopsar/Carousel</h1>
</header>
<section class="satevtunoda">
  <div class="kilopsar">
  <div class="kilopsa">
  <img src="https://cs5.pikabu.ru/images/big_size_comm/2015-09_1/14412042581739472.jpg">
  </div>

  <div class="kilopsa">
  <img src="https://cs4.pikabu.ru/post_img/big/2015/09/02/8/1441200743_1427616465.jpg">
  </div>

  <div class="kilopsa">
  <img src="https://cs11.pikabu.ru/post_img/big/2018/09/11/10/153668854415831902.jpg">
  </div>

  </div>

  <div class="arousel-liderisa">
  <span class="arkasemb-prev">
  <i class="fa fa-chevron-left"></i></span>

  <ul class="gtresaxu-mpuihfda"></ul>

  <span class="arkasemb-next">
  <i class="fa fa-chevron-right"></i></span>
  </div>
</section>

CSS

Код

img {
  width: 100%;
  height: 424px;
  vertical-align: middle;
}

.satevtunoda {
  max-width: 1020px;
  position: relative;
  margin: 0 auto;
  padding: 0 0;
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.satevtunoda:before,
.satevtunoda:after {
  content: "";
  display: table;
}

.satevtunoda:after {
  clear: both;
}

.kasemb {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.kasemb:before,
.kasemb:after {
  content: "";
  display: table;
}

.kasemb:after {
  clear: both;
}

.tesapsam {
  float: left;
  display: block;
  margin-bottom: 0px;
  vertical-align: top;
  padding: 0 0px;
  background: red;
}

.tesapsam.three {
  width: 25%;
}

/* Main Styles */

html {
  font-size: 16px;
}

span {
  cursor: pointer;
  transition: all 0.5s;
}

span:hover {
  color: #363636;
  transform: scale(1.5);
}
/* kilopsar */

.kilopsar {
  position: relative;
  width: 100%;
  min-height: 350px;
}

.kilopsa {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.active-kilopsa {
  display: block;
}
/* Controls */

.arousel-liderisa {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.arkasemb-prev,
.arkasemb-next {
  margin: 0 10%;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
  font-size: 1.5rem;
}

.arkasemb-next {}

.gtresaxu-mpuihfda {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}

.gtresaxu-mpuihfda li {
  color: #bbbcbc;
  display: inline;
  font-size: 2rem;
  margin: 0 5px;
  transition: color 0.5s;
}

.gtresaxu-mpuihfda li.active-dot {
  color: #363636;
}
/* Counter */

p {
  position: fixed;
  right: 0;
  top: 0;
  font-size: 1rem;
  background: grey;
  padding: 10px;
  box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

@media screen and (max-width:550px) {
  html {
  font-size: 10px;
  }
}

Код

$('.arkasemb-next').click(function() {
  var currentkilopsa = $('.active-kilopsa'),
  nextkilopsa = currentkilopsa.next(),
  currentDot = $('.active-dot'),
  nextDot = currentDot.next();

  if (nextkilopsa.length === 0) {
  nextkilopsa = $('.kilopsa').first();
  nextDot = $('.dot').first();
  }

  currentkilopsa.fadeOut(600).removeClass('active-kilopsa');
  nextkilopsa.fadeIn(600).addClass('active-kilopsa');

  currentDot.removeClass('active-dot');
  nextDot.addClass('active-dot');
});

$('.arkasemb-prev').click(function() {
  var currentkilopsa = $('.active-kilopsa'),
  prevkilopsa = currentkilopsa.prev(),
  currentDot = $('.active-dot'),
  prevDot = currentDot.prev();

  if (prevkilopsa.length === 0) {
  prevkilopsa = $('.kilopsa').last();
  prevDot = $('.dot').last();
  }

  currentkilopsa.fadeOut(600).removeClass('active-kilopsa');
  prevkilopsa.fadeIn(600).addClass('active-kilopsa');

  currentDot.removeClass('active-dot');
  prevDot.addClass('active-dot');
});

$(window).on('load resize', function() {
  var x = $('.active-kilopsa img').height() + "px";

  $('.kilopsar').css('min-height', x);
  $('p').text(x);
});

$('section').each(function() {
  var a = $('.kilopsa').length;
  for (i = 0; i < a; i++) {
  $('.gtresaxu-mpuihfda').append('<li class="dot">•</li>');
  }
});

$('.kilopsar div:first').addClass('active-kilopsa');
$('.gtresaxu-mpuihfda li:first').addClass('active-dot');

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

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

19 Октября 2018 Просмотров: 915 Комментариев: (0)

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

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

Kosten

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