ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Карусель слайдер с помощью CSS и jQuery

Карусель слайдер с помощью CSS и jQuery

Карусель слайдер с помощью CSS и jQuery
Стильно выполнен по своему дизайну слайдер, где можно передвигать слайды при наведении клика, а также по стрелкам, что установлены по сторонам. Вообще в материале вы можете узнать, как создать современный слайдер карусели, который скользит при наведении курсора. Кукую сторону вы его поведете, то автоматически прокручивается изображение, что внизу для этого создан элемент, который автоматически идет с картинками.

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

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

Так выглядит сам слайд, где будет на его обзор, и demo страница:

Слайдер на CSS для сайта на чистом CSS

Установочный процесс:

На страницы, где будет находит слайд, то в HEAD ставим стили и библиотеку:

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

HTML

Код
<div class="karuselevkum right">
  <div class="smotreled"></div>
  <div class="wrap">
  <ul>
  <li><img src="http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/SAGTRSA.jpg"/></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/urdsab.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/5241062.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/8618428.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/2683438.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/6262125.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/6532055.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/8225209.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/4144538.jpg"/></li>
  <li><img src="http://zornet.ru/_fr/83/6213219.jpg"/></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/1st.jpg"/></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/kasde.jpg"/></li>

  </ul>
  </div>
</div>

CSS

Код
.karuselevkum {
  display: block;
  position: absolute;
  -webkit-transform: translateZ(0);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  height: 200px;
  min-width: 550px;
  margin: auto;
  font-size: 0;
  background: #505456;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 4px 10px #000;
  height: 200px;
  -webkit-overflow-scrolling: touch;
}
.touch .karuselevkum {
  overflow: auto;
}
.karuselevkum:before, .karuselevkum:after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50px;
  font-size: 80px;
  line-height: 190px;
  font-family: arial;
  color: #2ab1ce;
  font-weight: bold;
  pointer-events: none;
  transition: 0.2s ease-out;
}
.karuselevkum:before {
  content: '\2039';
  left: 0;
  text-align: left;
  text-indent: -20px;
  box-shadow: 50px 0 20px -20px #292B2C inset;
}
.karuselevkum:after {
  content: '\203A';
  right: 0;
  text-align: right;
  text-indent: 40px;
  box-shadow: -50px 0 20px -20px #292B2C inset;
}
.karuselevkum.right:after, .karuselevkum.left:before {
  opacity: 1;
}
.karuselevkum.right:after {
  right: 0;
  text-indent: 60px;
}
.karuselevkum.left:before {
  left: 0;
  text-indent: -40px;
}
.karuselevkum > a {
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  color: #CCC;
  font-size: 1.5em;
  transition: 0.1s;
}
.karuselevkum > a:hover {
  color: #FFF;
}
.karuselevkum > a.prev {
  left: -20px;
}
.karuselevkum > a.next {
  right: -20px;
}
.karuselevkum > .smotreled {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  background: #2ab1ce;
  height: 4px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.2s, bottom 0.2s;
}
.karuselevkum:hover > .smotreled {
  opacity: 1;
  bottom: -10px;
}
.karuselevkum > .wrap {
  overflow: hidden;
  border-radius: 5px;
}
.karuselevkum > .wrap > ul {
  list-style: none;
  white-space: nowrap;
  height: 200px;
}
.karuselevkum > .wrap > ul > li {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin: 0 0 0 5px;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease-out;
}
.karuselevkum > .wrap > ul > li:first-child {
  margin: 0;
}
.karuselevkum > .wrap > ul > li > img {
  display: block;
  height: 100%;
  margin: auto;
  vertical-align: bottom;
  position: relative;
  z-index: 1;
  transition: 1s ease;
}

JS

Код
;(function($){
  "use strict";

  var bindToClass = 'karuselevkum',
  containerWidth = 0,
  scrollWidth = 0,
  posFromLeft = 0,  
  stripePos = 0,  
  animated = null,
  $slide, $carousel, el, $el, ratio, scrollPos, nextMore, prevMore, pos, padding;

  function calc(e){
  $el = $(this).find(' > .wrap');
  el = $el[0];
  $carousel = $el.parent();
  $slide = $el.prev('.smotreled');

  nextMore = prevMore = false;  

  containerWidth = el.clientWidth;
  scrollWidth = el.scrollWidth;  
  padding = 0.2 * containerWidth;  
  posFromLeft = $el.offset().left;
  stripePos = e.pageX - padding - posFromLeft;
  pos = stripePos / (containerWidth - padding*2);
  scrollPos = (scrollWidth - containerWidth ) * pos;
   
  if( scrollPos < 0 )
  scrollPos = 0;
  if( scrollPos > (scrollWidth - containerWidth) )
  scrollPos = scrollWidth - containerWidth;
   
  $el.animate({scrollLeft:scrollPos}, 200, 'swing');
   
  if( $slide.length )
  $slide.css({
  width: (containerWidth / scrollWidth) * 100 + '%',
  left: (scrollPos / scrollWidth ) * 100 + '%'
  });

  clearTimeout(animated);
  animated = setTimeout(function(){
  animated = null;
  }, 200);

  return this;
  }

  function move(e){
  if( animated ) return;

  ratio = scrollWidth / containerWidth;
  stripePos = e.pageX - padding - posFromLeft;  

  if( stripePos < 0)
  stripePos = 0;

  pos = stripePos / (containerWidth - padding*2);  

  scrollPos = (scrollWidth - containerWidth ) * pos;  

  el.scrollLeft = scrollPos;
  if( $slide[0] && scrollPos < (scrollWidth - containerWidth) )
  $slide[0].style.left = (scrollPos / scrollWidth ) * 100 + '%';

  prevMore = el.scrollLeft > 0;
  nextMore = el.scrollLeft < (scrollWidth - containerWidth);

  $carousel.toggleClass('left', prevMore);
  $carousel.toggleClass('right', nextMore);
  }

  $.fn.carousel = function(options){
  $(document)
  .on('mouseenter.karuselevkum', '.' + bindToClass, calc)
  .on('mousemove.karuselevkum', '.' + bindToClass, move);
  };

  $.fn.carousel();

})(jQuery);

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

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

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

Видео обзор:

15 Октября 2019 Загрузок: 5 Просмотров: 2125 Комментариев: (6)

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

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

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

Комментарии: 6
iano1
iano1 15 Октября 2019 20:031
0
Istochnik netu kosten ??
Kosten
Kosten 18 Октября 2019 14:572
0
Как понимаю, этот материал с вашего сайта, то дайте ссылку.
-SAM-
-SAM- 20 Октября 2019 00:503
0
Не с его сайта (поскольку он не писал библиотеки и так далее). Материал с того сайта, с которого вы писали свой, а именно с webdevtrick (вот Доступно только для пользователей).

iano1, по сути этот сайт публикует то, что найдено в сети, а не изготовляется с нуля - следовательно можно самому взять и проследить откуда, поисковики в помощь. То есть источник почти всегда есть и он очевиден. И зачем он понадобился в данном случае?

UPD.: всё равно я не понял сути, причём здесь его сайт, Kosten (он не имеет отношение к публикациям). И сайт тот можно узнать, когда посмотреть темы созданные участником на форуме (как и здесь вот, что приравнивается к спаму или рекламе своего ресурса, что ссылка на него и постятся скриншоты на него залитые, а не на фотохостинг).
Kosten
Kosten 20 Октября 2019 17:344
0
-SAM-, в курсе, что сей шедевр не его рук дело, мне просто стало интересно, какой у человека сайт. Где ранее закидывал в ЛС, свой линк, что не приходилось перейти на сайт, так как это трата времени, ведь понимал, как здесь человек размещал материал, то и на своем ресурсе будет аналог, а здесь стало интересно, какой у человека сайт, может зря тут наговариваю. Но что то подсказывает, что был прав, что не переходил.
astpivot
astpivot 09 Декабря 2020 11:235
0
Здравствуйте! Подскажите плз
-Данная карусель адаптируется под мобилки?
-Для добавления ссылок на превью просто img оборачивать? Никакие стили не слетят?
Kosten
Kosten 09 Декабря 2020 15:516
+1
Данный слайдер должен отлично адаптироваться под мобильные аппараты.
avatar