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

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

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

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

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

Адаптивное меню слайдера для сайта

Установка:

В HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

HTML

Код
<div class="slider">
  <div class="picture_movem">
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №1);"></div>
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №2);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №3);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №4);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №5);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №6);"></div>  
  </div>
  <div class="podvika_dukas"></div>
</div>

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 Просмотров: 761 Комментариев: (0)

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

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

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

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