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

Универсальный слайдер в адаптивном стиле

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

Большая вероятность есть, что данный слайдер выставлять на всю ширину, где пропишут в самом начале стилистике 100%, и даже в таком виде он смотрится шикарно. Сами точки с линиями также зависят от количества в нем картинок, если их будет немного, то безусловно горизонтальная линия переключателя увеличиться, но это если смотреть с большого монитора. А просмотр с мобильных гаджет, вам сразу покажет, что все корректно вписано. Но даже здесь все от веб мастера зависит, ведь все изначально занесено в CSS, где сами переключатели можно в своем дизайн поменять, и сделать не просто стандартном, а более уникальными, здесь только ваше решение может все поменять.

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

Установка:

В HEAD

Код

HTML

Код

CSS

Код

.slider {
  position: relative;
  height: 415px;
  margin: 36px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  max-width: 776px;

}
.picture_movem {
  position: relative;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
  will-change: transform;
}
.podvika_snimka {
  float: left;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
}
.podvika_dukas {
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
}
.podvika_kilasd,
.undikatos_dvulena {
  display: block;
  margin: 0 5px;
  height: 14px;
  background: rgba(221 221 221 / 47%);
  border-radius: 50px;
  cursor: pointer;
}
.undikatos_dvulena {
  position: absolute;
  background: white;
  width: auto;
  box-shadow: 0 4px 12px rgba(12 12 12 / 20%), 0 16px 20px rgba(12 12 12 / 20%);
}
.undikatos_dvulena-left {
  transition: left 0.3s cubic-bezier(0.48, 0.88, 0.25, 1.17), right 0.3s 0.1s cubic-bezier(0.48, 0.88, 0.25, 1.17);
}
.undikatos_dvulena-right {
  transition: left 0.3s 0.1s cubic-bezier(0.48, 0.88, 0.25, 1.17), right 0.3s cubic-bezier(0.48, 0.88, 0.25, 1.17);
}

jQuery

Код

$(function() {
  $('.slider').each(function() {
  let $th = $(this);
  $th.attr('data-pos', 1);
  let slide = $th.find('.podvika_snimka');
  let num = $th.find('.podvika_snimka').length;
  let dots = $th.find('.podvika_dukas');
  dots.prepend('<span class="undikatos_dvulena"></span>');
  for( let i = 1; i <= num; i++ ){
  dots.append('<span style="width:' + 100 / num + '%" class="podvika_kilasd" data-pos="'+ i +'"></span>');
  }
  $th.find('.picture_movem').css('width', 100 * num + '%');
  slide.css('width', 100 / num + '%');
  $th.find('.podvika_kilasd').on('click', function(){
  let currentPos = $th.attr('data-pos');
  let newPos = $(this).attr('data-pos');
  let newDirection = (newPos > currentPos ? 'right' : 'left');
  let currentDirection = (newPos < currentPos ? 'right' : 'left');
  $th.find('.undikatos_dvulena').removeClass('undikatos_dvulena-' + currentDirection);
  $th.find('.undikatos_dvulena').addClass('undikatos_dvulena-' + newDirection);
  $th.attr('data-pos', newPos);
  $th.find('.picture_movem').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)');
  $th.find('.undikatos_dvulena').css({'left': 100 / num * (newPos - 1) + '%','right':100 - (100 / num) - 100 / num * (newPos - 1) + '%'});
  });
  $th.find('.undikatos_dvulena').css({'left': 0,'right': 100 - (100 / num) + '%'});
  });
});

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

Демонстрация
Источник: atuin.ru

01 Октября 2022 Загрузок: 1 Просмотров: 665 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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