{% 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">
{%- assign collection = collections[section.settings.collection] -%}
{%- assign product_limit = section.settings.products_count -%}
 
<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 product in collection.products limit: product_limit %}
<div class="carousel-track">
<a href="{{ product.url | within: collection }}">
<div class="reveal">
<img class="img-explore" src="{{ product.featured_image | img_url: 'master'}}">
<img class=" hidden" src ="{{ product.images.last |img_url: '450x450'}}" /*hover the last image of the product*/
alt="{{ product.images.last.alt | escape }}"/>
</div>
<span class = "details-text product-title text-center"> {{ product.title }}</span>
<span class = "details-text product-price text-center"> {{ product.price | money }}</span>
</a>
</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;
}
 
/* image */
.hidden {
visibility: visible;
background-color: rgb(228, 241, 254); /* image background color when hover*/
opacity: 0;
object-fit: contain;
margin: 20% auto;
transform: scale(1.5, 1.5);
}
 
.reveal { position: relative;
height: 100%;
display: flex;
justify-content: space-between;
overflow: hidden;
}
 
.reveal .hidden {
position: absolute;
top:0;
transform-origin: center;
z-index: 100;
}
 
.reveal:hover .hidden {
opacity: 1;
}
 
.reveal:hover .img-explore {
top: 0
margin: 0 auto;
opacity: 0;
}
 
/* product details */
.details-text {
display: block;
color: {{section.settings.text_details}};
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
 
.details-text:lastchild {
margin-bottom: .5rem;
padding: 0;
}
 
.product-title {
font-size: 2rem;
}
 
.product-price {
font-size: 1.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": "Collection Slider",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": {
"en": "Featured collection"
}
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"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
}
],
 
"presets": [
{
"category": "Collection",
"name": "Collection Slider",
"settings": {
"product_count": 4
}
}
]
}
 
{% endschema %}