Адаптивный слайдер с ползунком для сайта
 | |
| Оригинальный стиль на ползунок слайдера, где идет в адаптивной верстке. Что можно применить под изображение, что меняется по клику на слайд. Здесь все выглядит особо по функциональность, где немного изменено, так как по умолчанию нет стрелок, которые указывают прокрутку, где основном находятся по сторонам. Все сделано под галерею, но так, чтоб можно было разместить на одной страницы, и по клику передвигать снимки. В современном дизайн, такой элемент уже не стал роскошью, он идет под функций, где предоставляет материал, что по клику можно выйти на основной материал. Сам каркас слайдера идет в заданной ширины под блок, но в нашем случай он адаптивный, что автоматически можно разместить на любом блоке, где уже на нем выставили, как ширину, так высоту. Если говорить про интернет магазины, или про те темы, где товар хочется предоставить на всю ширину страницы. То под него создается отдельная страницы, и выставляем там код, где сам веб-разработчик устанавливает ссылки. По умолчанию распределено на восемь изображений, вероятно можно несколько добавить и не больше. Так как все снимки будут наложены друг на друга, где на выбранной картинке делаем клик и она выдвигается по центру, тем полностью раскрывается по формату. Это полноценный слайд, что листаем картинке, по клику на сам материал, где можно заметить, что по сторонам идет совершенно другой оттенок, который и будет обозначать все представленные снимки.  Приступаем к установке: HTML Код <div id="manysangsod"> <div class="custometod benepakunce"></div> <div class="custometod"></div> <div class="custometod"></div> <div class="custometod"></div> <div class="custometod"></div> <div class="custometod"></div> <div class="custometod"></div> <div class="custometod"></div> </div> CSS Код * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } #manysangsod { width: 100%; height: 100%; background: #222; overflow: hidden; } .custometod { display: inline-block; vertical-align: top; margin-bottom: -4px; margin-left: -4px; height: 100%; background-size: cover; opacity: 0.5; transition: opacity 0.5s; } .custometod:nth-child(1) { background-image: url(http://zornet.ru/ABVUN/Anisa/MonkeyKing_0.jpg); } .custometod:nth-child(2) { background-image: url(http://zornet.ru/ABVUN/Anisa/Ashe_0.jpg) } .custometod:nth-child(3) { background-image: url(http://zornet.ru/ABVUN/Anisa/Caitlyn_0.jpg) } .custometod:nth-child(4) { background-image: url(http://zornet.ru/ABVUN/Anisa/Jayce_0.jpg) } .custometod:nth-child(5) { background-image: url(http://zornet.ru/ABVUN/Anisa/MonkeyKing_0.jpg) } .custometod:nth-child(6) { background-image: url(http://zornet.ru/ABVUN/Anisa/Ashe_0.jpg) } .custometod:nth-child(7) { background-image: url(http://zornet.ru/ABVUN/Anisa/Caitlyn_0.jpg) } .custometod:nth-child(8) { background-image: url(http://zornet.ru/ABVUN/Anisa/Sona_0.jpg) } .custometod:not(.benepakunce):hover { opacity: 0.75; cursor: pointer; } .benepakunce { opacity: 1; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } JS Код var manysangsod = $('#manysangsod'), custometods = $('.custometod'), benepakunce = $('.benepakunce'); var mincustometod, maxcustometod; function updateSizes() { var win = $(window).width(); maxcustometod = win * .8; mincustometod = (win - maxcustometod) / (custometods.length - 1); } function init() { updateSizes(); benepakunce.css('width', maxcustometod); custometods.not(benepakunce).css('width', mincustometod); } $(window).resize(init); custometods.click(function() { if ($(this).hasClass('benepakunce')) return; // Old benepakunce custometod benepakunce.animate({ width: mincustometod }, 200); benepakunce.toggleClass('benepakunce'); // New benepakunce custometod benepakunce = $(this); benepakunce.animate({ width: maxcustometod }, 200); benepakunce.toggleClass('benepakunce'); }); // Go init(); Все больше современные технологии идут по своим характеристикам, где можно задействовать безграничный функционал для самого слайдера, где основном все зависит от потребности работы на тематическом ресурсе. Где можно создать красивый эффект с применением различных способов перемещение или смены картинок, как классического до так аккордеона. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |