Адаптивная концепция слайд-шоу на CSS3
 | |
| Простое адаптивное слайд-шоу или слайдер на всю ширину, которое созданное при помощи HTML5, CSS3 и JavaScript, где не нужно прописывать jQuery. Где по умолчанию выстроена значение на 100%, что означает, этот слайд можно поместить, как в небольшой каркас блока, так и в шапку сайта. Здесь предусмотрены переключатели, которые поставлены по сторонам, так как они идут в темно прозрачном стиле, что на некоторых изображениях их трудно заметить. Что можно исправить в стилистике, где ставиться нужный вам оттенок цвета для функции смены картинок. Это стиль слайд-шоу современный и простой, который идеально подходит для веб-сайта разной тематике, так как кроме изображений вы по сути не должны видеть. Также он представлен для таких интернет ресурсов, которые идут с минималистской темой, где хочет продемонстрировать минимальный дизайн, но основой идет показ снимков. Как было сказано, что в этом слайд — шоу изображений большие, что изначально делает этот шаблон идеально подходит для изображений ориентированных веб — сайтов, таких как фотографии портфелей или сайтов электронной коммерции. Также проверил на адаптивность, где все очень просто, вы устанавливаете слайд в каркас, и он автоматически по размеру выстраивается по месту или заданному значению, что были указаны в рамке каркаса.  Установка: HTML Код <div class="diy-slideshow"> <figure class="show"> <img src="Здесь ссылка ни изображение №1" width="100%" /> </figure> <figure> <img src="Здесь ссылка ни изображение №2" width="100%" /> </figure> <figure> <img src="Здесь ссылка ни изображение №13" width="100%" /> </figure> <figure> <img src="Здесь ссылка ни изображение №4" width="100%" /> </figure> <figure> <img src="Здесь ссылка ни изображение №5" width="100%" /> </figure> <figure> <img src="Здесь ссылка ни изображение №6" width="100%" /> </figure> <span class="prev">«</span> <span class="next">»</span> </div> CSS Код .diy-slideshow{ position: relative; display: block; overflow: hidden; } figure{ position: absolute; opacity: 0; transition: 1s opacity; } figcaption{ position: absolute; font-family: sans-serif; font-size: .8em; bottom: .75em; right: .35em; padding: .25em; color: #fff; background: rgba(0,0,0, .25); border-radius: 2px; } figure.show{ opacity: 1; position: static; transition: 1s opacity; } .next, .prev{ color: #fff; position: absolute; background: rgba(0,0,0, .6); top: 50%; z-index: 1; font-size: 2em; margin-top: -.75em; opacity: .3; user-select: none; } .next:hover, .prev:hover{ cursor: pointer; opacity: 1; } .next{ right: 0; padding: 10px 5px 15px 10px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .prev{ left: 0; padding: 10px 10px 15px 5px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } JS Код (function(){ var counter = 0, $items = document.querySelectorAll('.diy-slideshow figure'), numItems = $items.length; var showCurrent = function(){ var itemToShow = Math.abs(counter%numItems); [].forEach.call( $items, function(el){ el.classList.remove('show'); }); $items[itemToShow].classList.add('show'); }; document.querySelector('.next').addEventListener('click', function() { counter++; showCurrent(); }, false); document.querySelector('.prev').addEventListener('click', function() { counter--; showCurrent(); }, false); })(); В адаптивной галерее можно использовать только изображение, где рекомендую выставить их под аналогичный размер, как по ширине, так и по длине. В таком случай будет намного корректно выводить на большом экране, а также на всем мобильных аппаратах. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |