Карусель слайдер с помощью CSS и jQuery
 | |
| Стильно выполнен по своему дизайну слайдер, где можно передвигать слайды при наведении клика, а также по стрелкам, что установлены по сторонам. Вообще в материале вы можете узнать, как создать современный слайдер карусели, который скользит при наведении курсора. Кукую сторону вы его поведете, то автоматически прокручивается изображение, что внизу для этого создан элемент, который автоматически идет с картинками. На сайте представлены слайдеры, но от них кардинально отличается, а точнее функционально, что идут под изображение, которые скользят в соответствии с направлением наведения. Где ползунок наведения курсора содержит несколько снимков в одной строке, которые с наведением курсора в левую или правую сторону скрываются. Где создается вертикальная прокрутка для просмотра всех картинок, которые присутствую. Если говорить про мобильные аппараты, то там пользователи могут провести пальцем влево или вправо, чтобы увидеть все изображения. Что в плане показа сделано удобно, а это можно по клику выставлять новые картинки, или просто одним поведением курсора в сторону они автоматически идут в аналогичную сторону каркаса, где красиво исчезают в стильном оформлении. Так выглядит сам слайд, где будет на его обзор, и demo страница:  Установочный процесс: На страницы, где будет находит слайд, то в 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); Теперь вы знаете как выстроить оригинальную карусель под слайдер, которая движется в соответствии с указаниями мыши. Этот слайд имеет много изображений построчно внутри прямоугольной рамки, а здесь горизонтальная полоса прокрутки для слайдов и просмотра всех изображений. Главным фактом этой программы является то, что она скользит при наведении курсора мыши. Предположим, вы перемещаете указатель мыши слева направо, тогда изображения будут скользить слева направо, и вы увидите скрытые изображения Демонстрация Видео обзор: | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
| |
