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

Адаптивный слайдер с переключением по клику

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

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

Слайдер работает только в режиме клика и имеет:

1. Заданный заголовок и навигацию в самом низу;
2. Вписаны название, а также подпись для картинки;
3. Присутствует стильный эффект перехода слайда;

Так выглядит один из многих слайдов:

Горизонтальный слайдер для сайта на HTML + CSS

Установка:

HEAD

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

HTML

Код
<div class="slider-content">
  <div class="header">
  <div class="logo">Актрисы <span>Голливуда</span></div>
  </div>
  <div class="slider-wrapper">
  <div class="slider-container">  
  <div class="control-nav">
  <ul><li class="slider-nav nav-0 active">1</li><li class="slider-nav nav-1">2</li><li class="slider-nav nav-2">3</li><li class="slider-nav nav-3">4</li></ul>
  </div>
  <div class="next-button" style="pointer-events: auto;">
  <svg class="arrow-right-5" viewBox="0 0 154 109">
  <symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
  <g>
  <polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
  </g>
  <g>
  <polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
  </g>
  </symbol>
  <use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
  </svg>
  </div>
  <div class="slide active" style="opacity: 1;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/s5700299.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Эмили Блант</div>
  <div class="title-2">Англо-американская актриса, обладательница премий «Золотой глобус»</div>
  </div>
  </div>
  </div>
  </div>
  <div class="slide" style="opacity: 0;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/6553720.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Кейт Бекинсейл</div>
  <div class="title-2">Британская актриса.</div>
  </div>
  </div>
  </div>
  </div>
  <div class="slide" style="opacity: 0;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/s3239115.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Оливия Уайлд</div>
  <div class="title-2">Американская актриса, продюсер и режиссёр.</div>
  </div>
  </div>
  </div>
  </div>
  <div class="slide" style="opacity: 0;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/5580094.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Алисия Викандер</div>
  <div class="title-2">Шведская актриса, танцовщица и продюсер</div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  <div class="footer-wrapper">
  <ul>
  <li><a href="http://zornet.ru/">Слайдеры</a></li>
  <li><a href="#link">Блог</a></li>
  </ul>
  </div>
</div>

CSS

Код
.slider-content * {
  box-sizing: border-box;
  font-family: Verdana, sans-serif;  
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);  
}
.slider-content {
  position: relative;
  background: #fff;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.slider-content .slider-container {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.slider-content .slide-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider-content .header {
  position: absolute;
  top: 30px;
  left: 40px;
  z-index: 999;
}
.slider-content .header .logo {
  font-size: 26px;
  color: white;  
}
.slider-content .header .logo span {
  font-weight: bold;
}
.slider-content .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.slider-content .slide:after {
  content: "";
  display: table;
  clear: both;
}
.slider-content .slide.active {
  opacity: 1;
}
.slider-content .slide .clip-svg {
  clip-path: circle(25px at 90%);
  width: 100%;
  height: 100%;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.slider-content .slide.active .clip-svg {
  clip-path: circle(130% at 90%);
}
.slider-content img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-content .title-wrapper {
  position: absolute;
  color: white;
  left: 80px;
  bottom: 80px;
  width: calc(100% - 160px);  
}
.slider-content .title-wrapper .title-1 {
  font-size: 30px;
  margin: 0;
  margin-bottom: 20px;
  font-weight: 900;  
}
.slider-content .title-wrapper .title-2 {
  font-size: 22px;
  margin: 0;  
}
.slider-content .control-nav {
  position: absolute;
  left: 30px;
  top: 20%;
  z-index: 999;
}
.slider-content .control-nav ul {
  position: relative;
  list-style: none;
  padding: 0;
}
.slider-content .control-nav li {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 10px 0;
  background: white;
  opacity: 0.5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;  
  font-size: 13px;
  font-weight: bold;
}
.slider-content .control-nav li.active {
  opacity: 1;
}
.slider-content .next-button {
  position: absolute;
  right: 1%;
  height: 20%;
  width: 20%;  
  top: 40%;
  cursor: pointer;
  z-index: 999;
}
.slider-content .next-button svg {
  height: 100%;
  width: 100%;
  transform: rotate(270deg);  
  fill: #FFF;
}
.slider-content .footer-wrapper {
  position: absolute;
  color: white;
  bottom: 30px;
  right: 40px;
  z-index: 10;
}
.slider-content .footer-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  box-shadow: inset 0 18px 12px -12px rgba(0,0,0,0.4);
}
.slider-content .footer-wrapper ul:after {
  content: "";
  display: table;
  clear: both;
}
.slider-content .footer-wrapper li {
  position: relative;
  float: left;
  margin: 0 12px;
}  
.slider-content .footer-wrapper a {
  color: #FFF;
  text-decoration:none;
  transition-duration: 0.3s;
  display:inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
}  
.slider-content .footer-wrapper a:hover {
  color: #FFF;
  text-decoration:none;
}  
.slider-content .footer-wrapper a:after {
  display: block;
  content: "";
  height: 2px;
  width: 0%;
  background-color: #FFF;
  transition: width 0.2s ease-in-out;
}
.slider-content .footer-wrapper a:hover:after,
.slider-content .footer-wrapper a:focus:after {
  width: 100%;
}

JS

Код
let mySlider = {
  config : {  
  slider : '.slider-content',
  activeSlide : '.slide.active',
  button: '.next-button',
  transition: 800,
  delay: function() {return this.transition;},
  navigation : '.control-nav'
  },
  init : function(config) {
  this.createNav();
  $(mySlider.config.button).click(function() {
  mySlider.animateSlide($(this));
  });
  },
  getActiveSlide : function() {
  return $(mySlider.config.activeSlide);  
  },
  getNextSlide : function() {
  let nextSlide = mySlider.getActiveSlide().next();
  if ( nextSlide.length === 0 ){
  nextSlide = $(mySlider.config.slider).find('.slide').eq(0);  
  }  
  return nextSlide;
  },  
  createNav : function() {
  let totalSlides = $(mySlider.config.slider).find('.slide').length;
  let controlNav = $(mySlider.config.navigation).find('ul');
  let nav;  
  for( let i=0; i < totalSlides; i++ ){
  let active = "";
  if(i === 0){
  active = 'active';
  }
  controlNav.append('<li class="slider-nav nav-'+i+' '+active+' ">'+ (i+1) +'</li>')
  }  
  },
  animateNav : function() {
  let activeNav = $('li.active');
  let nextNav = activeNav.next();
  if(nextNav.length === 0){
  nextNav = $('.control-nav li').eq(0);
  }
  activeNav.removeClass('active');
  nextNav.addClass('active');
  },
  animateSlide : function(button) {
  let activeSlide = mySlider.getActiveSlide();
  let nextSlide = mySlider.getNextSlide();
  let delay = mySlider.config.delay();  
  let clipPath = $('.clip-svg');
  clipPath.css('transition-duration', mySlider.config.transition+'ms');
  button.css('pointer-events', 'none');
  nextSlide.css('z-index',10);
  nextSlide.addClass('active').css('opacity', 1);  
  setTimeout(function() {
  activeSlide.removeClass('active').css('opacity', 0);
  }, delay);
  setTimeout(function() {
  nextSlide.css('z-index','');
  button.css('pointer-events', 'auto');
  }, delay + 300);
  mySlider.animateNav();
  }
}  
$(document).ready(function() { mySlider.init(); });

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

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

Демонстрация
Источник: Atuin.ru
2021-01-14 Загрузок: 1 Просмотров: 265 Комментарий: (0)

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

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

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

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