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

Слайдер с горизонтальными линиями в jQuery

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

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

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

Слайдер на сайте стал неотъемлемым элементом на сайте

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

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

Установка:

Пропишем в HEAD библиотеку, возможно у многих она установлена.

Код

HTML

Код

CSS

Код

.skolenia {
  position: relative;
  height: 396px;

  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  overflow: hidden;
}
.poseg_savun {
  position: relative;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
  will-change: transform;
}
.komu_usanla {
  float: left;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
}
.alenia-vedsca {
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
}
.skolenia-dot,
.skolenia-kilos {
  display: block;
  margin: 0 5px;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  cursor: pointer;
}
.skolenia-kilos {
  position: absolute;
  background: white;
  width: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.skolenia-kilos-left {
  transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.skolenia-kilos-right {
  transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.skolenia.skolenia2 {
background: #337AB7;
}
.skolenia.skolenia2 .komu_usanla {
color: #FFF;
padding: 20px;
max-height: 340px;
overflow-y: auto;
}
.skolenia.skolenia2 .komu_usanla img {
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
margin-bottom: 20px;
}

jQuery

Код

$(function() {
  $('.skolenia').each(function() {
  let $th = $(this);
  $th.attr('data-pos', 1);
  let slide = $th.find('.komu_usanla');
  let num = $th.find('.komu_usanla').length;
  let dots = $th.find('.alenia-vedsca');
  dots.prepend('<span class="skolenia-kilos"></span>');
  for( let i = 1; i <= num; i++ ){
  dots.append('<span style="width:' + 100 / num + '%" class="skolenia-dot" data-pos="'+ i +'"></span>');
  }
  $th.find('.poseg_savun').css('width', 100 * num + '%');
  slide.css('width', 100 / num + '%');
  $th.find('.skolenia-dot').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('.skolenia-kilos').removeClass('skolenia-kilos-' + currentDirection);
  $th.find('.skolenia-kilos').addClass('skolenia-kilos-' + newDirection);
  $th.attr('data-pos', newPos);
  $th.find('.poseg_savun').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)');
  $th.find('.skolenia-kilos').css({'left': 100 / num * (newPos - 1) + '%','right':100 - (100 / num) - 100 / num * (newPos - 1) + '%'});
  });
  $th.find('.skolenia-kilos').css({'left': 0,'right': 100 - (100 / num) + '%'});
  });
});

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

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

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

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

СКАЧАТЬ

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

Kosten

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