Как сделать слайдер тарифа из блока TE800 в Tilda
Our studio prices
Our monthly memberships will be the best value for your money and offer some additional benefits

Как сделать слайдер тарифа из блока TE800 в Tilda

1
Создали блок TE800: 3 в ряд, 6 карточек
2
Оформили контент: (скрин ниже)
3
Добавили блок Т123 и вставили в него код
Библиотека для примера
<style>
.t923__imgwrapper {display: none}
.t923__descr a {
    background-color: #000;
    color: #fff !important;
    padding: 10px 30px;
    border-radius: 5px;
    width: max-content;
    transition:all 0.3s linear;
}
.t923__descr a:hover { background-color: #5a5a5a}
.t923__wrapper {
    box-shadow: inset 0 0 2px 1px #b5b5b5;
    position:relative;
    overflow:visible;
}
.t-slds__wrapper {
    padding-top: 60px !important;
}
.t923__descr u {
    text-decoration: none;
    display: inline-block;
    border-bottom: 2px solid #e2e2e2;
    width: 80%;
    padding-bottom: 10px;
}
.t923__descr strong {
    padding-top: 4px;
    display: inline-block;
}

.t923__wrapper:after {
    background-repeat: no-repeat;
    background-size: cover;
    height: 70px;
    width: 70px;
    position: absolute;
    z-index: 33;
    right: 4%;
    top: 0;
    transform: translateY(-40%);
    box-shadow: 1px 2px 6px 0 #9a9a9a;
    border-radius: 50%;
}

.t923 div[data-slide-index="1"] .t923__wrapper:after,
.t923 div[data-slide-index="7"]:nth-child(8) .t923__wrapper:after
{
content: "";
background-image: url(https://static.tildacdn.com/tild3166-6636-4239-b436-396433343635/Group_1_6.svg);
}


.t923 div[data-slide-index="3"] .t923__wrapper:after,
.t923 div[data-slide-index="8"] .t923__wrapper:after
{
content: "";
background-image: url(https://static.tildacdn.com/tild3830-3764-4434-a661-383430353261/Group_1_7.svg);
}


.t923 div[data-slide-index="6"] .t923__wrapper:after,
.t923 div[data-slide-index="0"] .t923__wrapper:after
{
content: "";
background-image: url(https://static.tildacdn.com/tild6131-6235-4332-a631-303061343930/Group_1_8.svg);
}

@media screen and (max-width:1200px){
.t923__wrapper:after {
    height: 50px;
    width: 50px;
}    
}


@media screen and (min-width:1350px){
.t923 .t-slds__main {position: relative}
.t923 .t-slds__arrow_wrapper {width: 0}
.t923 .t-slds__arrow-left {
    left: 0;
    transform: translateX(-100%);
}
.t923 .t-slds__arrow-right {
    right: 0;
    transform: translateX(100%);
}
}

</style>

<script>
$( document ).ready(function() {
   setTimeout(function(){
 window.dispatchEvent(new Event('resize'));
}, 500);
});

</script>
Made on
Tilda