Управление файлами cookie
Настройки файлов cookie
Файлы cookie, необходимые для корректной работы сайта, всегда включены.
Другие файлы cookie можно настроить.
Другие файлы cookie можно настроить.
МОДИФИКАЦИЯ
Уникальный слайдер из блока «ST310N»
Создайте стильный 3D-слайдер с эффектом blur всего за 5 минут на базе блока ST310N из категории «Магазин» в Tilda
More products
Как это сделано?
1. Создаём блок ST310N из категории «Магазин»
2. Прописываем ему класс «uc-swiper-st310n»
3. Добавляем минимум 7 товаров, иначе будет криво отображаться (можно продублировать товары в шахматном порядке если у вас их меньше)
4. Добавляем код в блок Т123, публикуем и готово!
2. Прописываем ему класс «uc-swiper-st310n»
3. Добавляем минимум 7 товаров, иначе будет криво отображаться (можно продублировать товары в шахматном порядке если у вас их меньше)
4. Добавляем код в блок Т123, публикуем и готово!
Этот код вставить в блок Т123
<script>
// Добавим нашим карточкам класс swiper-slide
$(".uc-swiper-st310n .t778__col").addClass("swiper-slide");
// Удалим разделитель он нам не нужен
$(".uc-swiper-st310n .t778__separator").remove();
// Обернём карточки с классом swiper-slide в класс swiper-wrapper
$('.swiper-slide').wrapAll('<div class="swiper"><div class="swiper-wrapper"></div></div>');
</script>
<!--Добавим библиотеку слайдера-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!--Добавим стили слайдера, здесь ничего рассписывать не буду -->
<style>
/* Стрелка вправо, радиус скругления её */
.swiper .swiper-button-next{
border-top-left-radius:20px !important;
border-top-right-radius:20px !important;
border-bottom-left-radius:20px !important;
border-bottom-right-radius:20px !important;
}
/* Стрелка влево, радиус скругления её */
.swiper .swiper-button-prev{
border-top-left-radius:20px !important;
border-top-right-radius:20px !important;
border-bottom-left-radius:20px !important;
border-bottom-right-radius:20px !important;
}
.t706__cartwin {
backdrop-filter: blur(6px);
}
.uc-swiper-st310n {
height: 83vh;
}
@media (min-width: 980px) {
.swiper-button-prev, .swiper-button-next, .swiper-rtl .swiper-button-next {
background: #fff !important;
width: 50px !important;
height: 50px !important;
border-radius: 100% !important;
box-shadow: 0 0 15px #0000002e !important;
}
}
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {
width: 10px !important;
}
.swiper-button-prev::after {
font-size: 20px !important;
padding-right: 2px !important;
}
.swiper-button-next::after {
font-size: 20px !important;
padding-left: 2px !important;
}
.swiper-button-next, .swiper-button-next {
transition: .3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
background: #fff9f9 !important;
}
.swiper-button-next, .swiper-button-prev {
color: var(--swiper-navigation-color,#FCFDFF) !important;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset,10px) !important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset,10px) !important;
}
.uc-swiper-st310n .t778__col.t-col.t-col_4.t-align_left.t-item.t778__col_mobile-grid.swiper-slide {
filter: blur(6px) grayscale(100%);
}
.uc-swiper-st310n .t778__col.t-col.t-col_4.t-align_left.t-item.t778__col_mobile-grid.js-product.swiper-slide.swiper-slide-visible.swiper-slide-active {
filter: none;
}
.swiper {
user-select: none;
box-sizing: border-box;
overflow: hidden;
width: 100%;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
width: 86%;
height: 100%;
color: #fff;
overflow: hidden;
position: relative;
box-sizing: border-box;
border-radius: 20px;
}
.swiper-carousel {
position: relative;
margin: 0 auto;
max-width: 100%;
overflow: hidden
}
.swiper-carousel .swiper-slide, .swiper-carousel swiper-slide {
position: relative
}
@media (min-width: 980px) {
.swiper {
width: 1200px;
height: auto;
padding: 0 10px;
}
.swiper-slide {
width: 33%;
height: 100%;
}
.swiper-button-next, .swiper-button-prev {
top: var(--swiper-navigation-top-offset,48%) !important;
color: var(--swiper-navigation-color,#030D45) !important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset,50px) !important;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset,80px) !important;
}
}
@media (max-width: 980px) {
.swiper-button-prev, .swiper-button-next, .swiper-rtl .swiper-button-next {
background: #fff !important;
width: 30px !important;
height: 30px !important;
border-radius: 100% !important;
box-shadow: 0 0 15px #0000002e !important;
}
.swiper-button-next, .swiper-button-prev {
top: var(--swiper-navigation-top-offset,48%) !important;
color: var(--swiper-navigation-color,#030D45) !important;
}
.swiper-button-prev::after {
font-size: 15px !important;
padding-right: 2px !important;
}
.swiper-button-next::after {
font-size: 15px !important;
padding-left: 2px !important;
}
}
</style>
<!--Здесь доп скрипт - не удалять-->
<script>
!function(e, s) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = s() : "function" == typeof define && define.amd ? define(s) : (e = "undefined" != typeof globalThis ? globalThis : e || self).EffectCarousel = s()
}(this, (function() {
"use strict";
return function({swiper: e, on: s}) {
s("beforeInit", (()=>{
if ("carousel" !== e.params.effect)
return;
e.classNames.push(`${e.params.containerModifierClass}carousel`);
const s = {
watchSlidesProgress: !0,
centeredSlides: !0
};
Object.assign(e.params, s),
Object.assign(e.originalParams, s)
}
)),
s("progress", (()=>{
if ("carousel" !== e.params.effect)
return;
const s = e.slides.length;
for (let t = 0; t < e.slides.length; t += 1) {
const a = e.slides[t]
, r = e.slides[t].progress
, o = Math.abs(r);
let i = 1;
o > 1 && (i = .3 * (o - 1) + 1);
const n = a.querySelectorAll(".swiper-carousel-animate-opacity")
, l = r * i * 50 + "%"
, c = 1 - .2 * o
, f = s - Math.abs(Math.round(r));
a.style.transform = `translateX(${l}) scale(${c})`,
a.style.zIndex = f,
a.style.opacity = o > 3 ? 0 : 1,
n.forEach((e=>{
e.style.opacity = 1 - o / 3
}
))
}
}
)),
s("setTransition", ((s,t)=>{
if ("carousel" === e.params.effect)
for (let s = 0; s < e.slides.length; s += 1) {
const a = e.slides[s]
, r = a.querySelectorAll(".swiper-carousel-animate-opacity");
a.style.transitionDuration = `${t}ms`,
r.forEach((e=>{
e.style.transitionDuration = `${t}ms`
}
))
}
}
))
}
}
));
</script>
<!--Скрипт Свипер сладера-->
<script>
document.addEventListener("DOMContentLoaded", function() {
let swiper = new Swiper(".swiper",{
modules: [EffectCarousel],
slidesPerView: "auto",
centeredSlides: true,
loop: true,
effect: "carousel",
navigation: {
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
},
breakpoints: {
768: {}
},
});
});
</script>
<!--Добавим стрелки и точки-->
<div class="arrows-tm401">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
$(".arrows-tm401").appendTo(".swiper");
</script>
Что-то не получается?
Спросите у автора данной модификации по ссылке ниже
