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

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

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

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

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

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

HTML

Код

CSS

Код

img {
  border: 0;
}

ul {
  list-style: none;
}

.cenginesand-keregodmaves {
  width: 950px;
  margin: auto;
}

/* Обязательные стили для слайдера */

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

.lamprove_seakan_gunkines ul {
  position: absolute;
}

.lamprove_seakan_gunkines li {
  float: left;
  line-height: 0;
  text-align: cenginesand-keregodmaves;
}

.lamprove_seakan_gunkines li img {
  width: 100%;
  height: 428px;
}

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

.ncesakudou_needelpidas_nceasing span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  background: #6c7171;
  margin: 0 3px;
  transition: 0.1s;
  position: relative;
  top: 0;
}

.ncesakudou_needelpidas_nceasing span.active {
background: #e69c14;
  width: 12px;
  height: 12px;
}

.lamprove_seakan_gunkines > span {
  position: absolute;
  top: 50%;
  background: rgba(27, 26, 26, 0.41);
  z-index: 1;
  padding: 10px 17px;
  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%;
}

.lamprove_seakan_gunkines:hover span, .lamprove_seakan_gunkines:hover .kesagulpidan {
  transform: rotate(0deg);
}

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

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

.kesagulpidan .chkbox {
  display: none;
}

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

/* Сделать его адаптивным к любому макету */

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

Код

$(function(){

  var liCount = $('.lamprove_seakan_gunkines li').length;
  var ulWidth = (liCount * 100);
  var liWidth = (100/liCount);
  var leftIncrement = (ulWidth/liCount);
$('.lamprove_seakan_gunkines').height($('.lamprove_seakan_gunkines li img').height());

$('.lamprove_seakan_gunkines img').on('load', function(){
  $('.loader').fadeOut();
  $('.lamprove_seakan_gunkines').height($(this).height());
  })

  $(window).resize(function() {
  $('.lamprove_seakan_gunkines').css('height', $('.lamprove_seakan_gunkines li img').height());
  });

  $('.lamprove_seakan_gunkines ul').css('width', ulWidth + '%');
  $('.lamprove_seakan_gunkines li').css('width', liWidth + '%');

  $('.lamprove_seakan_gunkines').append(function() {
  $(this).append('<div class="ncesakudou_needelpidas_nceasing"></div>');
  $(this).prepend('<span class="prev">Prev</span><span class="next">Next</span>');
$(this).find('li').each(function(){
  $('.ncesakudou_needelpidas_nceasing').append('<span></span>');
  });
  });

  $('.lamprove_seakan_gunkines').css('height', $('.lamprove_seakan_gunkines li img').height());

  $('.ncesakudou_needelpidas_nceasing span:first-child').addClass('active');

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

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

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

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

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

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

  if($('.ncesakudou_needelpidas_nceasing span.active').is(':first-child')) {
  $('span.active').removeClass('active');
  $('.ncesakudou_needelpidas_nceasing 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();
  });

});

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

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

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

Важно: Если у вас не подключена библиотека, то в таком случай вам нужно ее подключить, то функционал не станет показывать. Также, кто пользуется конструктором uCoz, то вам не нужно не чего делать, ведь библиотека уже встроена в систему.

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

01 Июня 2019 Загрузок: 2 Просмотров: 1349 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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