465 0
Автоматический слайдер на четыре картинки + стрелки
Заготовка для автоматического слайдер на четыре картинки + стрелки. Здесь только каркас самих блоков - внутрянку нужно делать самому.
Стрелки не работают - так как скрипт нужно установить после основного файла(библиотеки) .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;}
Виконуваний код:
<![CDATA[<!-- 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>]]>
