Как создать слайдер стандартного блока на базе PL310 в Tilda
Special Offers
Best food for you and family
Raw Scallops From Erquy
€60
Candied Jerusalem artichokes, truffle
Celeriac and Truffle Ravioli
€55
Roasted langoustine, consommé
Cod Filet Cooked on One Side
€45
Chorizo, chickpea espuma, pequillos
Sea Bass Ceviche
€80
Avocado, butternut, lime
Corrèze Pan-seared Veal Liver
€85
Olive oil mashed potato, onion jus
Grilled Veal Filet Mignon
€83
Pumpkin, endives with hazelnuts
MAIN COURSE
Repudiandae dignissimos fugiat sit nam
Tender Octopus and Fennel
€55
Citrus, wild rocket condiment
Viennese Veal Cutlet
€70
Ricotta and spinach gnocchi, Caccio de Pepe
Italian Pasta With Meat
€29
Candied Jerusalem artichokes, truffle
Lamb-Beef Kofka Skewers with Tzatziki
€44
Lemon / Garlic / Beans
Bacon-Wrapped Shrimp with Garlic
€64
Bacon / Shrimp / Garlic
Pork with Italian Salsa Verde
€44
Pork / Tomatoes / Veggies
Dessert Menu
If your sweet tooth deserves a dessert, grab a fork or spoon right now.
Lemon meringue
€6
Baked meringue with lemon ice cream and lemon curd sauce
Apple tart
€10
Baked apple pie with vanilla ice cream
Mini chocolate truffles
€8
With a warm and liquid caramel inside
Cherry ice cream
€8
Vanilla ice cream with meringue and warm cherry sauce
Frozen berries
€10
Mixed berries with frozen yoghurt
Apple ice cream
€8
Vanilla ice cream with apples and caramel sauce
Как создать слайдер стандартного блока на базе PL310 в Tilda
1
Создали рядом 3 блока PL310
2
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём слайдер из стандартного блока PL310.
Используем другие блоки для слайдера.
Используем другие блоки для слайдера.
Фрагмент видео
Библиотека для примера
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<style>
.slick-slide {outline: none}
.slick-next {right: -100px}
.slick-prev { left: -100px}
.slick-prev, .slick-next {
width: 40px;
height: 40px;
z-index: 99;
transition: all 0.3s ease-in-out;
}
.single-item.slick-slider:hover .slick-prev { left: 10px}
.single-item.slick-slider:hover .slick-next { right: 10px}
.slick-dots li button:before {
font-size: 10px;
color: #b7b7b7 !important;
}
.slick-dots li.slick-active button:before {
color: #000 !important;
}
button.slick-arrow:before {
content: "";
font-size: 0;
background-image: url(https://static.tildacdn.com/tild6539-6632-4333-b763-626164316234/Groupleftarrow.svg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
button.slick-next:before {transform: rotate(180deg)}
.slick-dotted.slick-slider {margin-bottom: 0}
.slick-dots {bottom: 5px}
ul.slick-dots { padding-left: 0 !important}
.slick-dots li button:before { font-size: 10px; color: #fff;}
.slick-dots li.slick-active button:before {color: #fff}
@media screen and (max-width:980px){
button.slick-arrow{display:none !important}
}
</style>
<script>
$(document).ready(function(){
let listBlock = ['[data-record-type="812"]']; //Перечисление по атрибуту
//let listBlock = ['#rec372472386, #rec372475629']; //Перечисление по ID
$.each(listBlock,function(index,value){ $(value).wrap('<div class="single_wrapper"></div>')});
$('.single_wrapper').wrapAll('<div class="single-item"></div>');
$('.single-item').slick({
arrows:true,
dots:true,
pauseOnDotsHover:true,
mobileFirst:true,
speed:1200,
adaptiveHeight:true,
autoplay:true,
autoplaySpeed:5000
});
});
</script>
