Напишите мне и я обязательно отвечу
Заполните форму, чтобы я мог вам ответить.
Слайдер управляемый мышкой в Tilda
3 скрипта: сам эффект, его монтаж и настройки. При необходимости, вы можете самостоятельно внести изменения в код.
Настройки эффекта можно произвести по ссылке: https://vincentgarreau.com/particles.js/
В примере использованы блоки:
T123
Скрипт ниже добавляется в блок Т123
Настройки эффекта можно произвести по ссылке: https://vincentgarreau.com/particles.js/
В примере использованы блоки:
T123
Скрипт ниже добавляется в блок Т123
<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>
<!--Основа слайдера -->
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://i.ibb.co/tCGMzKH/Frame-26-6.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/ZWx7gHp/Frame-26-7.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/1nSsvRQ/Frame-26-8.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/QpJKWDn/Frame-26-9.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/KLb7ggh/Frame-26-10.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/NZ2rBnZ/Frame-26-11.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/C22CQyq/Frame-26-12.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/b7WBKRB/Frame-26-13.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/7CyNFN6/Frame-26-14.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/9yZR53H/Frame-26-15.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/g4BywxJ/Frame-26-16.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/5B8cT4H/Frame-26-17.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/bXDvdP6/Frame-26-18.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/Sy09Nz4/Frame-26-2.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/fNvfG71/Frame-26-3.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/Svdjb4S/Frame-26-4.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/rvzNx8B/Frame-26-5.png" alt=""></div>
</div>
<style>
/*Стили кнопок слайдеров*/
.prev , .next {
cursor:pointer;
padding: 4px;
height: .5em;
}
img.sliderarrowowl {
width: 35px;
margin-top: 15px;
border-radius: 17px;
transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #f0f0f0;
}
.owl-theme .owl-dots .owl-dot span {
background: #f0f0f0;
}
img.sliderarrowowl:active {
transform: scale(0.9);
}
.owl-prev , .owl-next{
display: none !important
}
</style>
<script>
$(document).ready(function() {
//ПРописываем ID нашего блока
$('#rec179807016').addClass('scrollowl');
setTimeout(function() {
var owl = $('.scrollowl .owl-carousel');
owl.owlCarousel({
loop:true,
nav:true,
margin:40,
responsive:{
0:{
items:1
},
600:{
items:1
},
960:{
items:2
},
1200:{
items:2
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
//Работа кнопок слайдера
$('.scrollowl .prev').click(function() {
$(".scrollowl .owl-prev")[0].click();
});
$('.scrollowl .next').click(function() {
$(".scrollowl .owl-next")[0].click();
});
}, 500);
});
</script>
Слайдер видеороликов в Tilda
<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>
<style>
/*Стили кнопок слайдеров*/
.prev , .next {
cursor:pointer;
padding: 4px;
}
img.sliderarrowowl {
width: 35px;
margin-top: 15px;
border-radius: 17px;
transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
background: #e8f7ff;
}
img.sliderarrowowl:active {
transform: scale(0.9);
}
.owl-prev , .owl-next{
display: none !important
}
</style>
<style>
/*Стили для слайдера*/
.videoowl .owl-carousel .video {
height: 200px;
}
.videoowl .owl-carousel .owl-video-tn {
background-size: auto;
}
</style>
<!--Основа слайдера -->
<div class="owl-carousel owl-theme">
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/watch?v=uCNWuSbPnt4?enablejsapi=1&?rel=0&fmt=18&html5=1&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/watch?v=uCNWuSbPnt4?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/watch?v=uCNWuSbPnt4?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/_ghb2zYCbbM?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/dSYu8FLVr_Y?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/pk_fUhOo0nc?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/dlO8aANekSM?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/6aP7bun6KPw?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!--Кнопки слайдера -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>
<script>
$(document).ready(function() {
//Добавляем класс к нашему блоку
$('#rec224864468').addClass('videoowl');
setTimeout(function() {
$('.owl-carousel').owlCarousel({
items:1,
merge:false,
loop:true,
margin:10,
video:true,
center:true,
//Адаптация слайдера
responsive:{
0:{
items:1
},
960:{
items:3
}
}
});
//Кнопки для слайдера работа
$('.videoowl .prev').click(function() {
$(".videoowl .owl-prev")[0].click();
});
$('.videoowl .next').click(function() {
$(".videoowl .owl-next")[0].click();
});
}, 500);
});
//При пролистывании или закрытии галереи останавливаем видео
$(document).on('click', '.videoowl .owl-carousel', function() {
$(".videoowl iframe").each(function() { $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*') });
});
</script>
budarov.ru
© 2014-2021
Сайт самозанятого интернет-маркетолога и специалиста по продвижению бизнеса в интернете
Комплексный
интернет-маркетинг
интернет-маркетинг
Копирайтинг и рерайтинг
