Слайдер для видео и изображение на CSS
 | |
| Великолепный слайдер с показом видео роликов и также изображение, где даже можно вывести текстовой слайд, и все это создано с привлечением CSS. При установках вам не нужно добавлять скрипты или библиотеки, все работает на чистой стилистике. Где безусловно есть минус, он заключается в том, что его нужно сделать адаптивным для мобильных аппаратов, что не мешает поставить такой вид на отдельную страницу. Что распределив снимки с видео, что и так можно перемешать, все зависит от тематического характера сайта. Ведь он отлично подойдет на многие тематические сайты. Если стандартный слайдер выводит только одни картинки, то здесь настроено и все сделано под разные форматы. Если вам нужно поставить видео и также перематывать как изображение, то здесь все корректно получится. Если первый слайд сделан под текстовой формат, а точнее мы написали краткое описание и поставили ссылку, и все отлично работает. По сторонам располагаются стрелки, где идет под темный формат, что на сильно темном фоне они отлично просматриваются. Но все же он создан под светлый сайт, где нет не какого каркаса, за него идет информация, это плееры и снимки, что располагаются под ссылки, где по клику переходим на основу, где размещается материал. Так смотрится текстовая версия:  Здесь видим вместо картинки, поставленный плеер, что и снимок также есть возможность прописать как ссылку.  HTML Код <html> <body> <div style="height: 100%; overflow-x: hidden; text-align: center"> <div class="koledaskep-sonedsaveg infinity" id="slider1"> <input type="radio" name="slides" checked="checked" id="vamukan_1"/> <input type="radio" name="slides" id="vamukan_2"/> <input type="radio" name="slides" id="vamukan_3"/> <input type="radio" name="slides" id="vamukan_4"/> <input type="radio" name="slides" id="vamukan_5"/> <input type="radio" name="slides" id="vamukan_6"/> <ul> <li> <p style="font-weight:bold; font-size:48px"> Это чистый CSS видео слайдер, разветвленный из <a href="https://codepen.io/drygiel" style="color:orange">Дамиан Дрыгель</a> <a href="/" style="color:cyan">Чистый CSS слайдер</a>. Хотя из-за использования встраиваемых кодов YouTube на CSS. </p> </li> <li> <p> <iframe width="710px" height="400px" src="https://www.youtube.com/embed/x1nJjyX4qo8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </p> </li> <li> <p> <iframe width="710px" height="400px" src="https://www.youtube.com/embed/50IJyz7ecqc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </p> </li> <li> <p> <iframe width="710px" height="400px" src="https://www.youtube.com/embed/Hi_poDU1HIE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </p> </li> <li> <p> <iframe width="710px" height="400px" src="https://www.youtube.com/embed/kQM1WvGk40c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </p> </li> <li> <p> <video controls preload> <source src="" /> </video> </p> </li> </ul> <div class="arrows"> <label for="vamukan_1"></label> <label for="vamukan_2"></label> <label for="vamukan_3"></label> <label for="vamukan_4"></label> <label for="vamukan_5"></label> <label for="vamukan_6"></label> <label class="goto-first" for="vamukan_1"></label> <label class="goto-last" for="vamukan_6"></label> </div> <div class="navigation"> <div> <label for="vamukan_1"></label> <label for="vamukan_2"></label> <label for="vamukan_3"></label> <label for="vamukan_4"></label> <label for="vamukan_5"></label> <label for="vamukan_6"></label> </div> </div> </div> </div> </body> </html> CSS Код .koledaskep-sonedsaveg { -moz-perspective: 1300px; -ms-perspective: 1300px; -webkit-perspective: 1300px; perspective: 1300px; display: inline-block; text-align: left; position: relative; margin-bottom: 22px; } .koledaskep-sonedsaveg > input { display: none; } .koledaskep-sonedsaveg > input:nth-of-type(10):checked ~ ul li:first-of-type { margin-left: -900%; } .koledaskep-sonedsaveg > input:nth-of-type(9):checked ~ ul li:first-of-type { margin-left: -800%; } .koledaskep-sonedsaveg > input:nth-of-type(8):checked ~ ul li:first-of-type { margin-left: -700%; } .koledaskep-sonedsaveg > input:nth-of-type(7):checked ~ ul li:first-of-type { margin-left: -600%; } .koledaskep-sonedsaveg > input:nth-of-type(6):checked ~ ul li:first-of-type { margin-left: -500%; } .koledaskep-sonedsaveg > input:nth-of-type(5):checked ~ ul li:first-of-type { margin-left: -400%; } .koledaskep-sonedsaveg > input:nth-of-type(4):checked ~ ul li:first-of-type { margin-left: -300%; } .koledaskep-sonedsaveg > input:nth-of-type(3):checked ~ ul li:first-of-type { margin-left: -200%; } .koledaskep-sonedsaveg > input:nth-of-type(2):checked ~ ul li:first-of-type { margin-left: -100%; } .koledaskep-sonedsaveg > input:nth-of-type(1):checked ~ ul li:first-of-type { margin-left: 0%; } .koledaskep-sonedsaveg > ul { position: relative; width: 820px; height: 420px; z-index: 1; font-size: 0; line-height: 0; border: 10px solid #ffffff; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .koledaskep-sonedsaveg > ul > li { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); vertical-align: top; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal; } .koledaskep-sonedsaveg > .navigation { position: absolute; bottom: -8px; left: 50%; z-index: 10; margin-bottom: -10px; font-size: 0; line-height: 0; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .koledaskep-sonedsaveg > .navigation > div { margin-left: -100%; } .koledaskep-sonedsaveg > .navigation label { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; margin: 0 4px; padding: 4px; background: #3A3A3A; } .koledaskep-sonedsaveg > .navigation label:hover:after { opacity: 1; } .koledaskep-sonedsaveg > .navigation label:after { content: ''; position: absolute; left: 50%; top: 50%; margin-left: -6px; margin-top: -6px; background: #ff0000; border-radius: 50%; padding: 6px; opacity: 0; } .koledaskep-sonedsaveg > .arrows { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .koledaskep-sonedsaveg.inside .navigation { bottom: 10px; margin-bottom: 10px; } .koledaskep-sonedsaveg > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after, .koledaskep-sonedsaveg > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after, .koledaskep-sonedsaveg > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after, .koledaskep-sonedsaveg > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after, .koledaskep-sonedsaveg > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after, .koledaskep-sonedsaveg > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after, .koledaskep-sonedsaveg > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after, .koledaskep-sonedsaveg > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after, .koledaskep-sonedsaveg > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after, .koledaskep-sonedsaveg > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after, .koledaskep-sonedsaveg > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after { opacity: 1; } .koledaskep-sonedsaveg > .arrows { position: absolute; left: -31px; top: 50%; width: 100%; height: 26px; padding: 0 31px; z-index: 0; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .koledaskep-sonedsaveg > .arrows label { display: none; position: absolute; top: -50%; padding: 13px; box-shadow: inset 2px -2px 0 1px #3A3A3A; cursor: pointer; -moz-transition: box-shadow 0.15s, margin 0.15s; -o-transition: box-shadow 0.15s, margin 0.15s; -webkit-transition: box-shadow 0.15s, margin 0.15s; transition: box-shadow 0.15s, margin 0.15s; } .koledaskep-sonedsaveg > .arrows label:hover { box-shadow: inset 3px -3px 0 2px #ff0000; margin: 0 0px; } .koledaskep-sonedsaveg > .arrows label:before { content: ''; position: absolute; top: -100%; left: -100%; height: 300%; width: 300%; } .koledaskep-sonedsaveg.infinity > input:first-of-type:checked ~ .arrows label.goto-last, .koledaskep-sonedsaveg > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0), .koledaskep-sonedsaveg > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1), .koledaskep-sonedsaveg > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2), .koledaskep-sonedsaveg > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3), .koledaskep-sonedsaveg > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4), .koledaskep-sonedsaveg > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5), .koledaskep-sonedsaveg > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6), .koledaskep-sonedsaveg > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7), .koledaskep-sonedsaveg > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8), .koledaskep-sonedsaveg > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9), .koledaskep-sonedsaveg > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) { display: block; left: 0; right: auto; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .koledaskep-sonedsaveg.infinity > input:last-of-type:checked ~ .arrows label.goto-first, .koledaskep-sonedsaveg > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2), .koledaskep-sonedsaveg > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3), .koledaskep-sonedsaveg > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4), .koledaskep-sonedsaveg > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5), .koledaskep-sonedsaveg > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6), .koledaskep-sonedsaveg > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7), .koledaskep-sonedsaveg > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8), .koledaskep-sonedsaveg > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9), .koledaskep-sonedsaveg > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10), .koledaskep-sonedsaveg > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11), .koledaskep-sonedsaveg > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) { display: block; right: 0; left: auto; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); } /*#region MODULES */ /*#endregion */ /*___________________________________ LAYOUT ___________________________________ */ * { margin: 0; padding: 0; } ul { padding-left: 40px; } #slider1 { margin: 20px; font-family: 'Lato'; } #slider1 > input:nth-of-type(3):checked ~ ul #bg { width: 80%; padding: 22px; -moz-transition: .5s .5s; -o-transition: .5s .5s; -webkit-transition: .5s .5s; transition: .5s .5s; } #slider1 > input:nth-of-type(3):checked ~ ul #bg div { -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); -moz-transition: .5s .9s; -o-transition: .5s .9s; -webkit-transition: .5s .9s; transition: .5s .9s; } /*_________ LAYOUT _________ */ video { width:710px; height:400px; background:transparent url('') no-repeat 0 0; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } p { margin-left:3em; } Каждое слайд шоу выстраивается по месту, что делает движение естественным и где-то стандартным, простой переход со старого вида на новый слайд. Здесь каждое изображение остается на экране, где можно настроить во встроенном компоновщике, что по умолчанию выставляем тот материал, который нужно вывести. Вы можете использовать как фотографии, так и видео для своей отзывчивой галереи, где кроме того можете использовать GIF и SVG, где посетители вашего сайта смогут просматривать в заданном размере. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |