Главная » CSS3 » css3 примеры и описание их создания » Автоматический слайдер на четыре картинки + стрелки
68 0  

Автоматический слайдер на четыре картинки + стрелки

Заготовка для автоматического слайдер на четыре картинки + стрелки. Здесь только каркас самих блоков - внутрянку нужно делать самому.

winked Стрелки не работают - так как скрипт нужно установить после основного файла(библиотеки) .js

на всех слайдах одна и таже картинка, поэтому смены не выдно.

Инструкция:

К каждому из 4 слайдов нужно приготовить по 3 картинки разных размеров:
1920*630

940*633

420*283


Также нужны белые картинки (если у вас фон другой, поменяйте на свой), для автоматической растяжки:

_s0.png, _s0-940.png, _s0-420.png


Слайды меняются раз в 3 секунды, время менять здесь (число должно быть кратное 4 - менять в 4 местах (12s))

.-slide.sbl-1 {animation: moves1 12s linear infinite; z-index:1;}
.-slide.sbl-2 {animation: moves2 12s linear infinite; z-index:2;}
.-slide.sbl-3 {animation: moves3 12s linear infinite; z-index:3;}
.-slide.sbl-4 {animation: moves4 12s linear infinite; z-index:4;}
Вигляд на Кам’янець-Подільський з літака
Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1Текст 1Текст 1 Текст 1 Текст 1
Вигляд на Кам’янець-Подільський з літака
Текст 2 Текст 2Текст 2 Текст 2Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
Вигляд на Кам’янець-Подільський з літака
Текст 3 Текст 3 Текст 3 Текст 3 Текст 3Текст 3 Текст 3 Текст 3 Текст 3 Текст 3
Вигляд на Кам’янець-Подільський з літака
Вигляд на Кам’янець-Подільський з літака

Исполняемый код:

<!-- SLIDER */--> <div class="prslid"> <div class="slide-button slide-prev"><i></i></div> <div class="slide-content"> <div class="sbl-1 -slide"> <figure itemscope itemtype="https://schema.org/ImageObject"> <picture> <source media="(max-width: 420px)" srcset="/uploads/posts/2020-03/1583021436_s4-420.jpg"> <source media="(max-width: 940px)" srcset="/uploads/posts/2020-03/1583021465_s4-940.jpg.jpg"> <img itemprop="contentUrl" src="/uploads/posts/2020-03/1583022243_s4.jpg" alt="Вигляд на Кам’янець-Подільський з літака"> </picture> <meta itemprop="description" content="Вигляд на Кам’янець-Подільський з літака"> <meta itemprop="author" content="rullan"> <meta itemprop="contentLocation" content="Україна, Кам'янець-Подільський, Хмельницька область, вул. Лісна 2"> <figcaption data-name="Заголовок 1" itemprop="name">Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1Текст 1Текст 1 Текст 1 Текст 1</figcaption> </figure> </div> <div class="sbl-2 -slide"> <figure itemscope itemtype="https://schema.org/ImageObject"> <picture> <source media="(max-width: 420px)" srcset="/uploads/posts/2020-03/1583021436_s4-420.jpg"> <source media="(max-width: 940px)" srcset="/uploads/posts/2020-03/1583021465_s4-940.jpg.jpg"> <img itemprop="contentUrl" src="/uploads/posts/2020-03/1583022243_s4.jpg" alt="Вигляд на Кам’янець-Подільський з літака"> </picture> <meta itemprop="description" content="Вигляд на Кам’янець-Подільський з літака"> <meta itemprop="author" content="rullan"> <meta itemprop="contentLocation" content="Україна, Кам'янець-Подільський, Хмельницька область, вул. Лісна 2"> <figcaption data-name="Заголовок 2" itemprop="name">Текст 2 Текст 2Текст 2 Текст 2Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 </figcaption> </figure> </div> <div class="sbl-3 -slide"> <figure itemscope itemtype="https://schema.org/ImageObject"> <picture> <source media="(max-width: 420px)" srcset="/uploads/posts/2020-03/1583021436_s4-420.jpg"> <source media="(max-width: 940px)" srcset="/uploads/posts/2020-03/1583021465_s4-940.jpg.jpg"> <img itemprop="contentUrl" src="/uploads/posts/2020-03/1583022243_s4.jpg" alt="Вигляд на Кам’янець-Подільський з літака"> </picture> <meta itemprop="description" content="Санаторна школа працює за загальноосвітніми навчальними програмами"> <meta itemprop="author" content="rullan"> <meta itemprop="contentLocation" content="Україна, Кам'янець-Подільський, Хмельницька область, вул. Лісна 2"> <figcaption data-name="Заголовок 3" itemprop="name">Текст 3 Текст 3 Текст 3 Текст 3 Текст 3Текст 3 Текст 3 Текст 3 Текст 3 Текст 3</figcaption> </figure> </div> <div class="sbl-4 -slide"> <figure itemscope itemtype="https://schema.org/ImageObject"> <picture> <source media="(max-width: 420px)" srcset="/uploads/posts/2020-03/1583021436_s4-420.jpg"> <source media="(max-width: 940px)" srcset="/uploads/posts/2020-03/1583021465_s4-940.jpg.jpg"> <img itemprop="contentUrl" src="/uploads/posts/2020-03/1583022243_s4.jpg" alt="Вигляд на Кам’янець-Подільський з літака"> </picture> <meta itemprop="description" content="Вигляд на Кам’янець-Подільський з літака"> <meta itemprop="author" content="rullan"> <meta itemprop="contentLocation" content="Україна, Кам'янець-Подільський, Хмельницька область, вул. Лісна 2"> <figcaption data-name="Заголовок 4" itemprop="name">Вигляд на Кам’янець-Подільський з літака</figcaption> </figure> </div> </div> <div class="slide-button slide-next"><i></i></div> <picture> <source media="(max-width: 420px)" srcset="/uploads/posts/2020-03/1583021477_s0-420.png"> <source media="(max-width: 940px)" srcset="/uploads/posts/2020-03/1583021429_s0-940.png"> <img src="/uploads/posts/2020-03/1583021425_s0.png" alt=""> </picture> </div> <style> /*-- SLIDER --*/ .prslid {display:block;position:relative; width:100%;margin:0;padding:0;} .prslid .slide-button, .prslid .slide-content {display: block; width: 100%;} .prslid .slide-button:hover {background-color: rgba(255,255,255,.15);} .prslid .slide-button {width:29px;height:100%;position:absolute;top:0;cursor:pointer;display:flex;justify-content: center; align-items: center;} .prslid .slide-prev {left:0;} .prslid .slide-next {right:0;} .prslid .slide-prev i, .prslid .slide-next i {display: block; width: 29px; height: 90px;background: rgba( 0, 0, 0, 0.5) url('../images/sprit.png');position:relative;z-index:33;} .prslid .slide-prev i:hover, .prslid .slide-next i:hover {filter: brightness(1) invert(.5);} .prslid .slide-prev i {background-position: -1175px -155px;} .prslid .slide-next i {background-position: -1175px -29px;} .prslid .slide-content {position: relative;} .-slide {width: 100%; height: 100%; background: #fff;position:absolute; top:0;left:0;opacity:1;} .prslid picture {display:block; position:relative; width:100%; overflow:hidden;} .prslid img {width: 100%; max-width:100%; height:auto;} .-slide.sbl-1 {animation: moves1 12s linear infinite; z-index:1;} .-slide.sbl-2 {animation: moves2 12s linear infinite; z-index:2;} .-slide.sbl-3 {animation: moves3 12s linear infinite; z-index:3;} .-slide.sbl-4 {animation: moves4 12s linear infinite; z-index:4;} @keyframes moves1 {0% {opacity:1;}25% {opacity:1;}26% {opacity:0;}100% {opacity:0;}} @keyframes moves2 {0% {opacity:0;}25% {opacity:0;}26% {opacity:1;}50% {opacity:1;}51% {opacity:0;}100% {opacity:0;}} @keyframes moves3 {0% {opacity:0;}50% {opacity:0;}51% {opacity:1;}75% {opacity:1;}76% {opacity:0;}100% {opacity:0;}} @keyframes moves4 {0% {opacity:0;}75% {opacity:0;}76% {opacity:1;}100% {opacity:1;}} .slide-content .-slide.slide-active {display:block;opacity:1;z-index:10;animation:none;} .-slide figure {position:relative; width:100%; height:100%;} .-slide figcaption {display:block; font-size:22px;position:absolute; top:90px; left:5%; padding:10px 30px; border-radius:10px; background: rgba( 0, 0, 0, 0.5); color:#fff; z-index:20;} .-slide figcaption::before {content: attr(data-name);display:block; width:100%; margin-bottom:15px;font-size:28px;} </style> <script> // Скрипт слайдера $('.slide-button').on('click',function(){ var buttonPrev = $(this).hasClass('slide-prev'), buttonNext = $(this).hasClass('slide-next'); var slideBlock = $('.-slide'), slideActive = $('.-slide.slide-active'); var slideLen = slideBlock.length, slideActiveIndex = slideActive.index(); slideBlock.removeClass('slide-active'); if(buttonPrev) { var slidePrev = (slideActiveIndex-1); slideBlock.eq(slidePrev).addClass('slide-active'); console.info('slide: '+slidePrev+'/'+slideLen); } if(buttonNext) { var slideNext = (slideActiveIndex+1); if(slideNext==slideLen) var slideNext = 0; slideBlock.eq(slideNext).addClass('slide-active'); console.info('slide: '+slideNext+'/'+slideLen); } }); </script>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020