{% comment %}
When customizing theme, changes need to be SAVE before you will see the updated setting.
{% endcomment %}
 
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h3>{{ section.settings.title | escape }}</h3>
</div>
{% endif %}
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
 
<div class="carousel-page">
 
<button type="button" class="carousel-navi carousel-navi-left"> </button>
<div class="carousel-root" {%- if section.settings.bg_color != false -%} style="background: none" {%- endif -%}>
 
{% for block in section.blocks %}
<div class="carousel-track ">
<span class="quote-icon">{% include 'icon-quote' %}</span>
{% if block.settings.quote != blank %}
<div class="rte-setting rte">{{ block.settings.quote }}</div>
{% endif %}
{% if block.settings.author != blank %}
<cite>{{ block.settings.author | escape }}</cite>
{% endif %}
 
</div>
 
{% endfor %}
</div>
<button type="button" class="carousel-navi carousel-navi-right"> </button>
</div>
 
<style>
html {
font-size: 62.5%;
height: 100vh;
}
.carousel-page {
position: relative;
width: 100%;
height: 50%;
display: flex;
overflow: auto;
justify-content: center;
}
/* carousel container */
.carousel-root {
position: relative;
width: 90%;
background: linear-gradient(to right bottom, {{section.settings.bg_linear1}}, {{section.settings.bg_linear2}});
background-size: cover;
border-radius: 1rem;
box-sizing: content-box;
padding: .5rem;
}
 
/* carousel navigation */
.carousel-navi {
cursor: pointer;
z-index: 100;
background:{{section.settings.navi_color}};
border: none;
border-radius: 1.5rem;
transition: all .3s;
margin: 0 .5rem;
padding: 30px;
align-self: center;
}
 
.carousel-navi:hover {
filter: brightness(0.85); /* brightness when hover*/
}
 
.carousel-navi:active {
filter: brightness(0.6);
transform: translateY(.4rem); /* brightness when got clicked*/
}
 
.carousel-navi-left {
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
 
.carousel-navi-right {
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
 
@media (max-width: 110em){
.carousel-root {
width: 85%;
}
 
@media (max-width: 65em){
.carousel-root {
width: 75%;
}
}
 
@media (max-width: 48em){
.carousel-root {
width: 69%;
}
.carousel-navi {
padding: 20px;
}
}
</style>
<script>
$(".carousel-root").slick({
infinite: true,
autoplay: {{ section.settings.autoplay }},
autoplaySpeed: {{ section.settings.autorotate_speed | times: 1000 }},
slidesToShow: {{section.settings.product_count}},
slidesToScroll: 1,
speed: 1500,
dots: false,
arrows: true,
prevArrow: $(".carousel-navi-left"),
nextArrow: $(".carousel-navi-right"),
responsive: [
{
breakpoint: 1020,
settings: {
slidesToShow: 3,
infinite: true, }
},
{
breakpoint: 600,
settings: {
slidesToShow: 2, }
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,}
}]
});
</script>
 
{% schema %}
{
"name": "Carousel",
"class": "index-section",
"max_blocks": 9,
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": {
"en": "Testomonials Slider"
}
},
{
"type": "range",
"id": "product_count",
"min": 2,
"max": 10,
"label": "Number of products to display",
"default": 4
},
{
"type": "checkbox",
"id": "bg_color",
"label": {
"en": "Background color NONE"
},
"default": false
},
{
"type": "color",
"id": "bg_linear1",
"label": "Background color first linear gradient",
"default": "#DAF4F1"
},
{
"type": "color",
"id": "bg_linear2",
"label": "Background color second linear gradient",
"default": "#11999E"
},
{
"type": "color",
"id": "text_details",
"label": "Text details color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "navi_color",
"label": "Navigation color",
"default": "#56D4C5"
},
{
"type": "checkbox",
"id": "autoplay",
"label": {
"en": "Autoplay slides"
},
"default": true
},
{
"type": "range",
"id": "autorotate_speed",
"label": {
"en": "Change slides every"
},
"max": 9,
"min": 1,
"step": 1,
"unit": {
"en": " s"
},
"default": 3
}
],
"blocks": [
{
"type": "quote",
"name": {
"cs": "Ohlas",
"da": "Udtalelse",
"de": "Testimonial",
"en": "Testimonial",
"es": "Testimonio",
"fi": "Suositukset",
"fr": "Témoignage",
"it": "Testimonial",
"ja": "お客様の声",
"ko": "추천",
"nb": "Anbefaling",
"nl": "Testimonial",
"pl": "Referencja",
"pt-BR": "Depoimento",
"pt-PT": "Testemunho",
"sv": "Kundberättelser",
"th": "เสียงชื่นชมจากลูกค้า",
"tr": "Kullanıcı görüşü",
"vi": "Chứng thực",
"zh-CN": "感言",
"zh-TW": "推薦文"
},
"settings": [
{
"type": "richtext",
"id": "quote",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"cs": "<p>Přidejte recenze a ohlasy zákazníků, které vyjadřují jejich spokojenost s vaším obchodem.</p>",
"da": "<p>Tilføj kundeanmeldelser og udtalelser for at fremhæve din butiks tilfredse kunder.</p>",
"de": "<p>Kunden-Reviews und Testimonials, die Kundenzufriedenheit beweisen.</p>",
"en": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>",
"es": "<p>Agrega las reseñas y los testimonios de los clientes para mostrar a los clientes satisfechos de tu tienda.</p>",
"fi": "<p>Lisää asiakasarviointeja ja suositteluja esimerkeiksi myymäläsi tyytyväisistä asiakkaista.</p>",
"fr": "<p>Ajoutez des avis et témoignages pour mettre en avant vos clients satisfaits.</p>",
"it": "<p>Aggiungi recensioni e testimonianze sul tuo negozio per dimostrare che i clienti sono soddisfatti.</p>",
"ja": "<p>あなたのストアの幸せなお客様を紹介するために、カスタマーレビューとお客様の声を追加してください。</p>",
"ko": "<p>고객 리뷰 및 추천을 추가하여 스토어에 만족한 고객을 보여주십시오.</p>",
"nb": "<p>Legg til kundeomtaler og anbefalinger for å vise frem butikkens glade kunder.</p>",
"nl": "<p>Voeg beoordelingen van klanten en testimonials toe om te laten zien dat je klanten tevreden zijn.</p>",
"pl": "<p>Dodaj opinie i referencje od klientów, aby pokazać zadowolenie klientów Twojego sklepu.</p>",
"pt-BR": "<p>Adicione comentários e depoimentos para dar destaque aos clientes satisfeitos com a sua loja.</p>",
"pt-PT": "<p>Adicione análises e testemunhos para mostrar os clientes felizes da sua loja.</p>",
"sv": "<p>Lägg till kundrecensioner och berättelser för att visa upp din butiks nöjda kunder.</p>",
"th": "<p>เพิ่มรีวิวและเสียงชื่นชมจากลูกค้าเพื่อนำเสนอลูกค้าที่ได้รับความพึงพอใจจากร้านค้า</p>",
"tr": "<p>Müşteri değerlendirmeleri ve kullanıcı görüşleri ekleyerek mağazanızdan memnun kalan müşterileri gösterin.</p>",
"vi": "<p>Thêm đánh giá và chứng thực từ khách hàng để chứng minh khách hàng hài lòng với cửa hàng.</p>",
"zh-CN": "<p>添加客户评论和感言，以展示对您的商店满意的客户。</p>",
"zh-TW": "<p>新增顧客評論和推薦文，展示對您商店滿意之顧客。</p>"
}
},
{
"type": "text",
"id": "author",
"label": {
"cs": "Autor",
"da": "Forfatter",
"de": "Autor",
"en": "Author",
"es": "Autor",
"fi": "Kirjoittaja",
"fr": "Auteur",
"it": "Autore",
"ja": "執筆者",
"ko": "작성자",
"nb": "Forfatter",
"nl": "Auteur",
"pl": "Autor",
"pt-BR": "Autoria",
"pt-PT": "Autoria",
"sv": "Upphovsman",
"th": "ผู้เขียน",
"tr": "Yazar",
"vi": "Tác giả",
"zh-CN": "作者",
"zh-TW": "作者"
},
"default": {
"cs": "Jméno autora",
"da": "Forfatterens navn",
"de": "Name des Autors",
"en": "Author's name",
"es": "Nombre del autor",
"fi": "Kirjoittajan nimi",
"fr": "Nom de l'auteur",
"it": "Nome dell'autore",
"ja": "筆者の名前",
"ko": "작성자 이름",
"nb": "Forfatterens navn",
"nl": "Naam auteur",
"pl": "Nazwisko autora",
"pt-BR": "Nome do autor",
"pt-PT": "Nome do autor",
"sv": "Författarens namn",
"th": "ชื่อผู้เขียน",
"tr": "Yazar adı",
"vi": "Tên tác giả",
"zh-CN": "作者姓名",
"zh-TW": "作者名稱"
}
}
]
}
],
 
"presets": [
{
"category": "Carousel",
"name": "Testimonials Slider",
"settings": {
"product_count": 4
}
}
]
}
{% endschema %}