ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер с ползунком вверх и вниз на CSS

Слайдер с ползунком вверх и вниз на CSS

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

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

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

Этот вид идет под стандартное значение, что происходит при открытии страницы или заходе на интернет ресурс.

Здесь больше всего просматривают с планшета.

Это можно отнести к мобильным телефонам, где не перестраивается, а просто сжиматься, но все же остается читабельным текстом.

Приступаем к установке:

HTML

Код

<div id="keconsecd">
  <div id="voluptdukebu">
  <div class="image kinydegas"></div>
  <div class="turunepen">
  <div class="psumedol"></div>
  <div class="nemodolores">
  <p class="dulopamtun">Заголовок</p>
  <hr />
  <div class="dcusandamedka">
Здесь пишем описание под тему или картинку, что закреплена к материалу.
  </div>
  </div>
  </div>

  <div class="image goluptatib"></div>

  <div class="turunepen">
  <div class="psumedol"></div>
  <div class="nemodolores">
  <p class="dulopamtun">ZORNET.RU
</p>
  <hr />
  <div class="dcusandamedka">
Здесь пишем описание под тему или картинку, что закреплена к материалу. №1
  </div>
  </div>
  </div>
  </div>

  <div id="doloradiente">
  <div class="image delenitiguis"></div>
  <div class="turunepen">
  <div class="psumedol"></div>
  <div class="nemodolores">
  <p class="dulopamtun">Название</p>
  <hr />
  <div class="dcusandamedka">
Здесь пишем описание под тему или картинку, что закреплена к материалу. №2
  </div>
  </div>
  </div>

  <div class="image quaeranatus"></div>
  <div class="turunepen">
  <div class="psumedol"></div>
  <div class="nemodolores">
  <p class="dulopamtun">Ключевая фраза</p>
  <hr />
  <div class="dcusandamedka">
Здесь пишем описание под тему или картинку, что закреплена к материалу. №3
  </div>
  </div>
  </div>
  </div>
</div>

CSS

Код

#keconsecd,
#voluptdukebu,
#doloradiente {
  height: 100%;
}

#voluptdukebu,
#doloradiente {
  position: relative;
  width: 50%;
}

#keconsecd {
  overflow: hidden;
}

#voluptdukebu {
  left: 0;
}

#doloradiente {
  top: 0;
  left: 50%;
}

.image {
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor:pointer;
}

.turunepen {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.dulopamtun {
  text-align: center;
  font-family: 'Impact', Arial;
  font-size: 4.5em;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.dcusandamedka {
  padding: 4% 14%;
  text-align: justify;
  font-family: sans-serif;
  letter-spacing: 0.15em;
}

.kinydegas {
  background-image: url(http://zornet.ru/ABVUN/Anisa/busines.jpg);
}

.quaeranatus {
  background-image: url(http://zornet.ru/ABVUN/Anisa/platform.jpg);
}

.goluptatib {
  background-image: url(http://zornet.ru/ABVUN/Anisa/zakoper.jpg);
}

.delenitiguis {
  background-image: url(http://zornet.ru/ABVUN/Anisa/btersapom.jpg);
}

.psumedol,
.nemodolores {
  display: inline-block;
  vertical-align: middle;
  margin-right: -4px;
}

.psumedol {
  height: 100%;
  width: 0;
}

Код

$(function() {
  var leftContainer = $('#voluptdukebu'),
  rightContainer = $('#doloradiente');
  var slides = $('.image').length;
  function init() {
  rightContainer.css('top', slides * (-100) + '%');
  }

  function slide() {
  leftContainer.animate({
  top: '-100%'
  }, 600, function() {
  $('#voluptdukebu>div:first-child').appendTo(leftContainer);
  leftContainer.css('top', '');
  });

  rightContainer.animate({
  top: (slides - 1) * (-100) + '%'
  }, 600, function() {
  $('#doloradiente>div:last-child').prependTo(rightContainer);
  rightContainer.css('top', slides * (-100) + '%');
  });
  }

  $(window).click(slide);
  init();
});

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

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

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

24 Ноября 2018 Просмотров: 1470 Комментариев: (0)

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

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

Kosten

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