» »

Адаптивный слайдер карусель на JS + CSS

Адаптивный слайдер карусель на JS + CSS

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

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

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

Такой вид идет самого малого экрана мобильного телефона:

Загрузка изображений в слайдер после загрузки

Вид на смартфона:

Простой в настройке слайдер изображений

Это уже ближе к планшету:

Слайдер мобильный изображений записи

А так уже на мониторе:

Полноразмерный адаптивный слайдер сайта

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

HTML

Код
<div class="center">
  <div class="sationcognis">
  <div class="gedamplekos-manuvactung"></div>
  </div>
  <div class="kangodepam">  
  <ul>
  <li><img src="Ссылка на изображение №1" /></li>
  <li><img src="Ссылка на изображение №2" /></li>
  <li><img src="Ссылка на изображение №3" /></li>
  <li><img src="Ссылка на изображение №4" /></li>
  <li><img src="Ссылка на изображение №5" /></li>
  </ul>
  </div>
  </div>

CSS

Код
.center {
  width: 1100px;
  margin: auto;
}

.sationcognis {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  border: 10px solid #efefef;
  border-top: 10px solid #ff8f3f;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
  top: 50%;
  left: 50%;
  transition: .3s;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: sationcognis 2s linear infinite;
}

.gedamplekos-manuvactung {
  width:40px;
  height: 40px;
  margin: auto;
  transform: translate(0, 0) rotate(0deg);
  border-radius: 50%;
  border: 8px solid #e2e2e2;
  border-bottom: 8px solid #66a0ff;
  animation: sationcognisInner 1s linear reverse infinite;
}

@keyframes sationcognis {
  100% {
  transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes sationcognisInner {
  100% {
  transform: translate(0, 0) rotate(360deg);
  }
}

.kangodepam {
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.kangodepam ul {
  position: absolute;
}

.kangodepam li {
  float: left;
  line-height: 0;
  text-align: center;
}

.kangodepam li img {
  width: 100%;
}

.getusatedun {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
}

.getusatedun span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #606161;
  margin: 0 4px;
  transition: 0.1s;
  position: relative;
  top: 0;
}

.getusatedun span.active {
  background: orange;
  width: 10px;
  height: 10px;
}

.kangodepam > span {
  position: absolute;
  top: 50%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  padding: 6px 10px;
  margin: -10px 0 0;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.prev {
  left: 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
}

.next {
  right: -1px;
  transform: rotate(-90deg);
  transform-origin: 100% 0%;
}

.kangodepam:hover span, .kangodepam:hover .gedekolas {
  transform: rotate(0deg);
}

.gedekolas {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  transform: translateY(50px);
  transition: .3s;
}

.gedekolas label {
  background: rgba(0, 0, 0, .4);
  padding: 10px;
  display: block;
}

.gedekolas .chkbox {
  display: none;
}

.gedekolas .chkbox:checked + label {
  background: rgba(0, 0, 0, .7);
}

@media (max-width: 1200px) {  
  .center {
  width: 100%;
  padding: 0 15px;
  }
}

JS

Код
$(function(){
   
  var liCount = $('.kangodepam li').length;
  var ulWidth = (liCount * 100);
  var liWidth = (100/liCount);
  var leftIncrement = (ulWidth/liCount);

  $('.kangodepam').height($('.kangodepam li img').height());
   
  $('.kangodepam img').on('load', function(){
  $('.sationcognis').fadeOut();
  $('.kangodepam').height($(this).height());
  })

  $(window).resize(function() {
  $('.kangodepam').css('height', $('.kangodepam li img').height());
  });  
   
  $('.kangodepam ul').css('width', ulWidth + '%');
  $('.kangodepam li').css('width', liWidth + '%');

  $('.kangodepam').append(function() {
  $(this).append('<div class="getusatedun"></div>');
  $(this).prepend('<span class="prev">prev</span><span class="next">next</span>');

  $(this).find('li').each(function(){
  $('.getusatedun').append('<span></span>');
  });
  });

  $('.kangodepam').css('height', $('.kangodepam li img').height());
   
  $('.getusatedun span:first-child').addClass('active');

  if(liCount > 2) {
  $('.kangodepam ul').css('margin-left', -leftIncrement + '%');
  $('.kangodepam ul li:last-child').prependTo('.kangodepam ul');
  } else if(liCount == 1) {
  $('.kangodepam span').css('display', 'none');
  $('.gedekolas').css('display', 'none');
  } else if(liCount == 2) {
  $('.kangodepam .prev').css('display', 'none');
  }

  function moveLeft() {
  $('.kangodepam ul').animate({
  left : -leftIncrement + '%'
  }, 500, function(){
  $('.kangodepam ul li:first-child').appendTo('.kangodepam ul');
  $('.kangodepam ul').css('left', '');

  if($('.getusatedun span').hasClass('active')) {

  if($('.getusatedun span.active').is(':last-child')) {
  $('span.active').removeClass('active');
  $('.getusatedun span:first-child').addClass('active');
  } else {
  $('span.active').next().addClass('active');
  $('span.active').prev().removeClass('active');
  }
  }
  });
  }

  function moveRight() {
  $('.kangodepam ul').animate({
  left : leftIncrement + '%'
  }, 500, function(){
  $('.kangodepam ul li:last-child').prependTo('.kangodepam ul');
  $('.kangodepam ul').css('left', '');

  if($('.getusatedun span').hasClass('active')) {

  if($('.getusatedun span.active').is(':first-child')) {
  $('span.active').removeClass('active');
  $('.getusatedun span:last-child').addClass('active');
  } else {
  $('span.active').prev().addClass('active');
  $('span.active').next().removeClass('active');
  }
  }
  });
  }

   
  if(liCount > 1) {
  invertalValue = setInterval(function() {
  moveLeft();
  }, 5000);
  }

  $('.prev').click(function(){
  moveRight();
  });

  $('.next').click(function(){
  moveLeft();
  });

});

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

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

Демонстрация
2019-01-14 Загрузок: 1 Просмотров: 420 Комментарий: (0)

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

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

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