Customizable Slick Carousel for Collections for Free

Customizable Slick Carousel for Collections for Free

Carousels are good to showcase the products. A lot of developers discourage using carousel due to main reason that customers miss out the product since it is too small, and it keep sliding.

What if we create a carousel that zooms in and pause when hover?

Create a responsive carousel for your product collections. This is a plug and play code. No coding experience needed. No app nor subscription needed


1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, create a new section, name it "custom-carousel", then paste the code below.

 {% 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 %}

3. Click SAVE.
4. Done. All you need to customize the theme

Note: Since we are using outside script or source code, theme must be SAVE before you see changes when customizing theme.

Code is also available for testimonials or reviews. To see the code, click here.

Copied!
Voltar para o blogue

Deixe um comentário