<!--SL08 - Модификация для Тильды. Слайдер на весь экран https://mod.tistols.com/slider-fill -->
<style>
/* Добавьте высоту слайдов на разных разрешениях дисплея */
/* xl */
.tistols_fs .t-rec .t396__artboard {
width: 100% !important;
height: 550px !important;
word-break: normal !important;
background: transparent !important;
}
/* lg */
@media screen and (max-width: 1199px) {
.tistols_fs .t-rec .t396__artboard {
height: 550px !important;
}
}
/* md */
@media screen and (max-width: 959px) {
.tistols_fs .t-rec .t396__artboard {
height: 100% !important;
}
}
/* sm */
@media screen and (max-width: 639px) {
.tistols_fs .t-rec .t396__artboard {
height: 100% !important;
}
}
@media screen and (max-width: 479px) {
.tistols_fs .t-rec .t396__artboard {
height: 100% !important;
}
}
.tistols_fs {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.tistols_fs .t-rec,
.tistols_fs .t396__artboard {
overflow: hidden !important;
}
/* hide filters */
.tistols_fs .t-rec .t396__artboard>.t396__carrier,
.tistols_fs .t-rec .t396__artboard>.t396__filter {
display: none !important;
}
.left, .right {
cursor: pointer;
}
.tistols_fs .owl-carousel .owl-stage-outer {
overflow: visible;
}
.tistols_fs .owl-item:not(.active) .tn-elem:not(.trigger) {
opacity: 0
}
.tistols_fs .owl-item:not(.active) .trigger {
left:15%!important;
opacity: 1;
}
.tistols_fs .owl-item:not(.active) .trigger.prev {
left:70%!important;
opacity: 1;
}
.tistols_fs .owl-item:not(.active) .trigger .tn-atom {
color: transparent!important;
-webkit-text-stroke: 1px #C4AD8A;
}
.tistols_fs .owl-item:not(.active) .trigger .tn-atom:hover {
color: #C4AD8A!important;
-webkit-text-stroke: 1px #C4AD8A;
cursor:pointer;
}
</style>
<!--SL08 - Модификация для Тильды. Слайдер на весь экран https://mod.tistols.com/slider-fill -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
var bgImages = [
'https://static.tildacdn.com/tild3232-6662-4866-b435-386336646532/pexels-ekaterina-bol.jpg',
'https://static.tildacdn.com/tild3233-3161-4335-b036-363331383266/pexels-ekaterina-bol.jpg',
'https://static.tildacdn.com/tild3632-3436-4362-b663-663666646130/pexels-ekaterina-bol.jpg',
'https://static.tildacdn.com/tild6139-6438-4535-a561-316364623964/pexels-ekaterina-bol.jpg'
];
var shape = 4; //количество шторок
var percentWidth = 100 / shape;
var block = $('.uc-tistols_fs');
var wrap = $('.tistols_fs');
var slides = $('.uc-fs_slide');
var box = wrap.find('.tn-atom');
var totalSlides = slides.length;
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var cover = $('.cover');
cover.empty();
for (var i = 0; i < totalSlides; i++) {
var activeClass = i === 0 ? 'active' : '';
cover.append('<div class="tistols_bg ' + activeClass + '" style="width:100%;height:100%;background-size:cover;background-image:url(' + bgImages[i] + ')"></div>');
}
for (var j = 0; j < shape; j++) {
cover.append(`<div class="tistols_column" style="width:${percentWidth}%;border-left:0px solid #111111;height:100%;transition-delay:'${(1 + j * 0.2)}s;"></div>`);
}
var style = $('<style>');
for (var k = shape; k < shape; k++) {
var delay = k * 0.1;
style.append(`
.tistols_column:nth-child(${k}):after {
transition-delay:${delay}s;
}
`);
}
$('head').append(style);
var owl = wrap.find('.owl-carousel').owlCarousel({
loop: false,
center: false,
dots: false,
nav: false,
margin: 0,
items: 4,
mouseDrag: false,
touchDrag: false,
smartSpeed: 750,
responsive: {
0: { items: 1 },
640: { items: 1 },
1000: { items: 1 },
}
});
var currentSlideIndex = 0;
function updateControls() {
$('.tistols_bg').removeClass('active');
$('.tistols_bg:eq(' + currentSlideIndex + ')').addClass('active');
if (currentSlideIndex === 0) {
$('.left').hide();
} else {
$('.left').show();
}
if (currentSlideIndex === totalSlides - 1) {
$('.right').hide();
} else {
$('.right').show();
}
$('.trigger').removeClass('prev active');
$('.trigger:eq(' + currentSlideIndex + ')').addClass('active');
if (currentSlideIndex > 0) {
$('.trigger:eq(' + (currentSlideIndex - 1) + ')').addClass('prev');
}
}
$('.owl-carousel').on('changed.owl.carousel', function(event) {
currentSlideIndex = event.item.index;
updateControls();
});
block.find(".left").click(function(e) {
e.preventDefault();
$('.tistols_column').addClass('active');
setTimeout(function() {
owl.trigger('prev.owl.carousel');
setTimeout(function() {
$('.tistols_column').removeClass('active');
}, 500);
}, 1000);
});
block.find(".right").click(function(e) {
e.preventDefault();
$('.tistols_column').addClass('active');
setTimeout(function() {
owl.trigger('next.owl.carousel');
setTimeout(function() {
$('.tistols_column').removeClass('active');
}, 500);
}, 1000);
});
$('.trigger .tn-atom').click(function() {
var content = parseInt($(this).text(), 10) - 1;
if (content > currentSlideIndex) {
for (var i = currentSlideIndex; i < content; i++) {
$('.right').click();
}
} else if (content < currentSlideIndex) {
for (var j = currentSlideIndex; j > content; j--) {
$('.left').click();
}
}
});
$('.tistols_bg:eq(0)').addClass('active');
$('.left').hide();
updateControls();
});
</script>