collection list slider shopify

Add Collection List Slider - All Shopify Themes

Compatibility: Compatible with all Shopify Themes.

Show case all your collections using a slider. This is a slider for the collections and not products. For product slider, please refer here 

 Check DEMO store here 💻. Password: made4uo

To Start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.

{{ 'collection-list-slider.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

<div class="collectionListSlider" style= "padding-top: {{ section.settings.padding_top }}; padding-bottom: {{section.settings.padding_bottom }}">
<div class="collectionListTitleWrapper{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
{% if section.settings.title != blank %}
<h2 class="collectionListTitle">{{ section.settings.title | escape }}</h2>
{% endif %}
{% if section.settings.show_view_all %}
<a href="/collections" class="button btn">View All</a>
{% endif %}
</div>
<universal-slider-component style="--border-color: {{section.settings.border_color}};">
{% if section.settings.slider_visual == 'slider' %}<div class="sliderCounterBox">
<button type="button" class="sliderCounterButton sliderCounterBtn--prev slider-button {% if section.settings.slider_button_fixed != true %}slider_button_fixed{% endif %}"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
style"display: flex"
aria-controls="Slider-{{ section.id }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
</svg>
</button>
{% endif %}
<ul class="product-grid slider slider--tablet" role="list">
{%- for block in section.blocks -%}
{% assign block_length = forloop.length %}
<li class="collection-list__item grid__item grid--col{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>
{% assign card_collection = block.settings.collection %}
{% assign media_aspect_ratio = section.settings.image_ratio %}
{% assign columns = columns %}
{%- liquid
assign ratio = 1
if card_collection.featured_image and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
assign ratio = card_collection.featured_image.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
<div class="card-wrapper">
<div class="card card--{{ settings.card_style }}
{% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if card_collection.featured_image == nil and settings.card_style == 'card' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
<a href="{{ card_collection.url }}" class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if card_collection.featured_image or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
{%- if card_collection.featured_image -%}
<div class="card__media">
<div class="media media--transparent media--hover-effect">
<img srcset="{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
{%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
{%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
{%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
{{ card_collection.featured_image | img_url: 'master' }} {{ card_collection.featured_image.width }}w"
src="{{ card_collection.featured_image | img_url: '1500x' }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)"
alt="{{ card_collection.title | escape }}"
height="{{ card_collection.featured_image.height }}"
width="{{ card_collection.featured_image.width }}"
loading="lazy"
class="motion-reduce"
>
</div>
</div>
{%- endif -%}
</a>
{% if settings.card_style == 'card' or card_collection.featured_image %}
<div class="card__content">
<div class="card__information">
<h4 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
</a>
</h4>
{%- if card_collection.featured_image == nil and card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}
</p>
{%- endif -%}
</div>
</div>
{% endif %}
</div>
</div>

<style>
.collectionListSlider .card-wrapper {
background: {{ section.settings.background}};
}
</style>
</li>
{%- endfor -%}
</ul>
{% if section.settings.slider_visual == 'slider' %}
<button type="button" class="sliderCounterButton sliderCounterBtn--next slider-button {% if section.settings.slider_button_fixed != true %}slider_button_fixed{% endif %}"
name="next"
style="display: flex"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
</svg>
</button>
</div>
{% endif %}
{%- if block_length > 3 -%}

{%- if section.settings.slider_visual == 'slider' -%}
<div class="sliderContainer">
<input type="range" min="0" max="{{block_length | minus: 1 }}" value="1" class="sliderCounter" id="myRange">
</div>
<style>
.collectionListSlider .sliderCounter::-webkit-slider-thumb {
width: calc(100% / {{block_length }});
}

.collectionListSlider .sliderCounter::-moz-range-thumb {
width: calc(100% / {{block_length}});
}
</style>
{% endif %}

<div class="slideshow__controls slider-buttons no-js-hidden {% if section.settings.slider_visual == 'slider' %}hidden {% endif %}"
style="display: flex">
<button type="button" class="slider-button slider-button--prev"
data-step="1"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
</svg>
</button>
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'numbers' %} caption{% endif %}">
<div class="counter--mobile">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="slider-counter--total">
{{block_length}}
</span>
</div>
<div class="slideshow__control-wrapper slider">
{%- for block in section.blocks -%}
<button class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link sliderCounterLink"
data-dot="{{forloop.index0}}"
style="width: 100%"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }}
{{ forloop.length}}" aria-controls="Slider-{{ section.id }}">
{%- if section.settings.slider_visual == 'numbers' -%}{{ forloop.index }}{% else %}<span class="dot"></span>{%- endif -%}
</button>
{%- endfor -%}
</div>
</div>
<button type="button" class="slider-button slider-button--next"
name="next"
data-step="1"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
</svg>
</button>
</div>
<noscript>
<div class="slider-buttons" style="display: flex">
<div class="slider-counter">
{%- for block in section.blocks -%}
<a href="#Slide-{{ section.id }}-{{ forloop.index }}"
data-dot="{{forloop.index}}"
class="slider-counter__link link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length}}">
{{ forloop.index }}
</a>
{%- endfor -%}
</div>
</div>
</noscript>
{%- endif -%}
</universal-slider-component>
</div>

{% schema %}
{
"name": "Collection List Slider",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Collections",
"label": "Title"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "View all button"
},
{
"type": "header",
"content": "Additional Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 99,
"step": 1,
"unit": "%",
"default": 0,
"label": "Section padding top"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 99,
"step": 1,
"unit": "%",
"default": 0,
"label": "Section padding bottom"
},
{
"type": "header",
"content": "Collection card"
},
{
"type": "color",
"id": "background",
"label": "Card background",
"default": "#eee"
},
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#eee"
},
{
"type": "select",
"id": "slider_visual",
"options": [
{
"value": "dots",
"label": "dots"
},
{
"value": "numbers",
"label": "numbers"
},
{
"value": "slider",
"label": "slider"
}
],
"default": "numbers",
"label": "Counter"
},
{
"type": "checkbox",
"id": "slider_button_fixed",
"default": true,
"label": "Slider button fixed"
}
],
"blocks": [
{
"type": "featured_collection",
"name": "featured collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Collection List Slider"
}
]
}
{% endschema %}

 3. Next, open the Asset folder, and "create a new asset." Name it "collection-list-slider." Then place the code below.

 .collectionListSlider {
padding: 5%;
overflow: hidden;
}

.collectionListSlider universal-slider-component {
position: relative;
display: block;
}

.collectionListSlider .card__information {
padding-bottom: 10px;
padding-top: 10px;
}

.collectionListSlider .card__heading {
text-align: center;
}


@media screen and (max-width: 989px) {
.no-js slider-component .slider {
padding-bottom: 3rem;
}
}

.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
}

@media screen and (max-width: 749px) {
.grid--col {
width: 33%;
min-width: 33%;
}

}

@media screen and (max-width: 481px) {
.grid--col {
width: 50%;
min-width: 50%;
}
}

@media screen and (min-width: 750px) {
.grid--col {
width: 20%;
min-width: 25%;
}
}


.collectionListSlider .collectionListTitleWrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}

.collectionListSlider .collectionListTitle {
margin: auto 0;
}

.collectionListSlider .featured-grid {
display: flex;
padding: 0;
}

.collectionListSlider .featured-grid li {
list-style: none;
}
.collectionListSlider li {
list-style: none;
}

.collectionListSlider .slider--tablet {
display: flex;
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
margin: 0;
margin-bottom: 1rem;
width: 100%;
}

.collectionListSlider .collection-list__item {
padding: calc(1vw + 5px);
}

.collectionListSlider .slider__slide {
padding-bottom: 0;
padding: 0 1rem;
}

@media (prefers-reduced-motion) {
.slider--everywhere {
scroll-behavior: auto;
}
}

.collectionListSlider .slider.slider--everywhere .slider__slide {
margin-bottom: 0;
padding-bottom: 0;
scroll-snap-align: center;
}

/* Scrollbar */

.collectionListSlider .slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}

.collectionListSlider .slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}

.no-js .slider {
-ms-overflow-style: auto;
scrollbar-width: auto;
}

.no-js .slider::-webkit-scrollbar {
display: initial;
}

.collectionListSlider .slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}

.collectionListSlider .slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}

.collectionListSlider .slider-counter {
margin: 0 1.2rem;
display: flex;
min-width: 2rem;
justify-content: center;
}

@media screen and (max-width: 749px) {
.collectionListSlider .slider-counter--dots,
.collectionListSlider .slider-counter--numbers {
margin: 0;
}
}


@media screen and (max-width: 749px) {
.collectionListSlider .slider-counter__link {
padding: 0.7rem;
}
}

.collectionListSlider .slider-counter__link--dots .dot {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 0.1rem solid rgba(0, 0, 0, 0.5);
padding: 0;
display: block;
}

.collectionListSlider .slider-counter__link--active.slider-counter__link--dots .dot {
background-color: rgba(0, 0, 0);
}

@media screen and (forced-colors: active) {
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: CanvasText;
}
}

.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
border-color: rgba(0, 0, 0);
}

.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
transition: transform 0.2s ease-in-out;
}

.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
transform: scale(1.1);
}

.collectionListSlider .slider-counter__link--numbers {
color: rgba(0, 0, 0 , 0.5);
text-decoration: none;
}

.collectionListSlider .slider-counter__link--numbers:hover {
color: rgb(0, 0, 0);
}

.collectionListSlider .slider-counter__link--active.slider-counter__link--numbers {
text-decoration: underline;
color: rgb(0, 0, 0 );
}

.collectionListSlider .slider-buttons {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.collectionListSlider .slider-button {
color: rgba(0, 0, 0, 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}

.slider-button:not([disabled]):hover {
color: rgb(0, 0, 0);
}

.slider-button .icon {
height: 0.6rem;
}

.slider-button[disabled] .icon {
color: rgba(0, 0, 0, 0.3);
cursor: not-allowed;
}

.slider-button--next .icon {
transform: rotate(-90deg);
}

.slider-button--prev .icon {
transform: rotate(90deg);
}

.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) scale(1.1);
}

.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) scale(1.1);
}

.spaced-section--full-width:last-child featured-slideshow-component:not(.page-width) .slideshow__controls {
border-bottom: none;
}

@media screen and (min-width: 750px) {
.collectionListSlider .slideshow__controls {
position: relative;
}
}

slideshow-component:not(.page-width) .slider-buttons {
border-right: 0;
border-left: 0;
}

.collectionListSlider .slideshow__control-wrapper {
display: flex;
overflow-x: auto;
}

.image--active {
border: 5px solid var(--border-color);
}

.counter--mobile {
display: none;
}

@media only screen and (max-width: 481px) {
.collectionListSlider .counter--mobile {
display: flex;
}
.collectionListSlider .slideshow__control-wrapper {
display: none;
}
}

.collectionListSlider .slider-counter__link {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
}

.collectionListSlider .smallDot {
width: 0.4rem !important;
height: 0.4rem !important;
}

.collectionListSlider .mediumDot {
width: 0.75rem !important;
height: 0.75rem !important;
}


/* slider counter */

.collectionListSlider .slidecontainer {
width: 100%;
}

.collectionListSlider .sliderCounter {
-webkit-appearance: none;
width: 100%;
height: 5px;
padding: 0;
border-radius: 10px;
background: #d3d3d3;
outline: none;
opacity: .7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.sliderCounter:hover {
opacity: 1;
}

.sliderCounter::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 5px;
margin: 10px 0;
border-radius: 5px;
background: black;
cursor: pointer;
}

.sliderCounter::-moz-range-thumb {
height: 5px;
margin: 10px 0;
border-radius: 5px;
background: black;
cursor: pointer;
}

.sliderCounterBox {
display: flex;
align-items: center;
}

.sliderCounterButton {
display: none;
position: absolute;
background: black !important;
color: white !important;
transition: all .2s ease;
z-index: 5;
}

.collectionListSlider:hover .sliderCounterBtn--prev{
left: -5%;
}

.collectionListSlider:hover .sliderCounterBtn--next {
right: -5%;
}

.slider_button_fixed.sliderCounterBtn--prev {
left: -100%;
}

.sliderCounterBtn--prev > svg {
transform: rotate(90deg);
}

.slider_button_fixed.sliderCounterBtn--next {
right: -100%;
}

.sliderCounterBtn--prev {
left: -5%;
}

.sliderCounterBtn--next {
right: -5%;
}

.sliderCounterBtn--next > svg{
transform: rotate(-90deg);
}

.sliderCounterButton:hover {
transform: scale(1.1);
}

.sliderCounterButton > svg {
height: 2rem !important;
}

@media screen and (max-width: 749px) {
.sliderCounterBtn--prev {
left: -5%;
}
.sliderCounterBtn--next {
right: -5%;
}
}

.card-wrapper {
color: inherit;
height: 100%;
position: relative;
text-decoration: none;
}

.card {
text-align: center;
text-decoration: none;
}

.card--card {
height: 100%;
}

.card--card,
.card--standard .card__inner {
position: relative;
box-sizing: border-box;
}

.card--card:after,
.card--standard .card__inner:after {
content: '';
position: absolute;
z-index: -1;
}

.card .card__inner .card__media {
overflow: hidden;
/* Fix for Safari border bug on hover */
z-index: 0;
}

.card--card .card__inner .card__media {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.card--standard.card--text {
background-color: transparent;
}

.card-information {
text-align: center;
}

.card__media,
.card .media {
bottom: 0;
position: absolute;
top: 0;
}

.card .media {
width: 100%;
}

.card__media {
margin: 0rem;
width: calc(100% - 2 * 0rem);
}

.card__inner {
overflow: hidden;
position: relative;
aspect-ratio: 1;
}

.card--media .card__inner .card__content {
padding: 1rem;
position: relative;
}

.card__content {
display: grid;
grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
padding: 10px;
width: 100%;
}

.card__content--auto-margins {
grid-template-rows: minmax(0,auto) max-content minmax(0,auto);
}

.card__information {
grid-row-start: 2;
}

.card__badge {
align-self: flex-end;
grid-row-start: 3;
justify-self: flex-start;
}

.card__badge.top {
align-self: flex-start;
grid-row-start: 1;
}

.card__badge.right {
justify-self: flex-end;
}

.card__media .media img {
height: 100%;
object-fit: cover;
object-position: center center;
width: 100%;
}

.card__inner:not(.ratio) > .card__content {
height: 100%;
}

.card__heading {
margin-top: 0;
}

.card__heading:last-child {
margin-bottom: 0;
}

.card--card.card--media > .card__content {
margin-top: 0rem;
}

.card--standard.card--text a::after,
.card--card .card__heading a::after {
bottom: 0;
left: 0;
right:0;
top: 0;
}

.card__heading a::after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

.card__heading a:after {
outline-offset: 0.3rem;
}

.card__heading a:focus:after {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(0, 0, 0, 0.3);
outline: 0.2rem solid rgba(0, 0, 0, 0.5);
}

.card__heading a:focus-visible:after {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(0, 0, 0, 0.3);
outline: 0.2rem solid rgba(0, 0, 0, 0.5);
}

.card__heading a:focus:not(:focus-visible):after {
box-shadow: none;
outline: 0;
}

.card__heading a:focus {
box-shadow: none;
outline: 0;
}

@media screen and (min-width: 750px) {
.card .media.media--hover-effect > img:only-child,
.card-wrapper .media.media--hover-effect > img {
transition: transform .2s ease;
}

.card-wrapper:hover .card img{
transform: scale(1.03);
}

.card-wrapper:hover
.media.media--hover-effect
> img:first-child:not(:only-child) {
opacity: 0;
}

.card-wrapper:hover .media.media--hover-effect > img + img {
opacity: 1;
transition: transform .2s ease;
transform: scale(1.03);
}

.card__information {
transition: transform .2s ease;
}

.card__information:hover a {
text-decoration: underline;
text-underline-offset: 2px;
}

.card__information:hover {
transform: scale(1.05);
}
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text > .card__content .card__heading,
.card--standard > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
display: none;
}

.card--standard > .card__content {
padding: 0;
}

.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
display: none;
}

.card--extend-height {
height: 100%;
}

.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
display: flex;
flex-direction: column;
}

.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
flex-grow: 1;
}

.card .icon-wrap {
margin-left: 0.8rem;
white-space: nowrap;
transition: transform .2s ease;
overflow: hidden;
}

.card-information > * + * {
margin-top: 0.5rem;
}

.card-information {
width: 100%;
}

.card-information > * {
color: rgb(0, 0, 0);
}

.card-information > .price {
color: rgba(0, 0, 0);
}

.card-information > .rating {
margin-top: 0.4rem;
}

.card-information
> *:not(.visually-hidden:first-child)
+ *:not(.rating) {
margin-top: 0.7rem;
}

.card-information .caption {
letter-spacing: 0.07rem;
}

.card-article-info {
margin-top: 1rem;
}

@media screen and (max-width: 749px) {
.collection .grid__item:only-child {
flex: 0 0 100%;
max-width: 100%;
}
}

@media screen and (min-width: 750px) {
.collection .title-wrapper-with-link--no-heading {
}
}

@media screen and (max-width: 989px) {
.collection .slider.slider--tablet {
margin-bottom: 1.5rem;
}
}

.collection .loading-overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
width: 100%;
padding: 0 1.5rem;
opacity: 0.7;
}

@media screen and (min-width: 750px) {
.collection .loading-overlay {
padding-left: 5rem;
padding-right: 5rem;
}
}

.collection.loading .loading-overlay {
display: block;
}

.collection--empty .title-wrapper {
margin-top: 10rem;
margin-bottom: 15rem;
}

@media (prefers-reduced-motion) {
.motion-reduce {
transition: none !important;
}
}

.ratio {
display: flex;
position: relative;
align-items: stretch;
}

.ratio::before {
content: '';
width: 0;
height: 0;
padding-bottom: var(--ratio-percent);
}

.hidden {
display: none !important;
}

 4. Still at the Asset folder, open the global.js or theme.js and add the code below. 

 class UniversalSliderComponent extends HTMLElement {
constructor() {
super();
this.sliderControlWrapper = this.querySelector('.slider-buttons');

this.slider = this.querySelector('ul');
this.sliderItems = this.querySelectorAll('li');
this.sliderCounter = this.querySelector('.sliderCounter');
this.currentPageElement = this.querySelector('.slider-counter--current');
this.pageTotalElement = this.querySelector('.slider-counter--total');
this.prevButton = this.querySelector('.slider-button--prev');
this.nextButton = this.querySelector('.slider-button--next');

this.sliderButtonPrev = this.querySelector('.sliderCounterBtn--prev');
this.sliderButtonNext = this.querySelector('.sliderCounterBtn--next');

this.step = 0;

this.sliderControlLinksArray = Array.from(this.querySelectorAll('.sliderCounterLink'));
this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));
this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
this.nextButton.addEventListener('click', this.onButtonClick.bind(this));

if(this.sliderCounter) {
this.sliderButtonPrev.addEventListener('click', this.onButtonClick.bind(this));
this.sliderButtonNext.addEventListener('click', this.onButtonClick.bind(this));
this.sliderCounter.addEventListener('change', this.sliderCounterUpdate.bind(this));
}
}

update(slide) {
this.sliderItems.forEach(image => {
image.classList.remove('image--active');
image.removeAttribute('aria-current');
});

this.currentPageElement.innerHTML = slide + 1;
this.pageTotalElement.innerHTML = this.sliderItems.length;
this.sliderItems[slide].classList.add('image--active');
this.sliderItems[slide].setAttribute('aria-current', true);
this.sliderControlButtons = this.querySelectorAll('.slider-counter__link');
this.sliderControlButtons.forEach(link => {
link.classList.remove('slider-counter__link--active');
link.removeAttribute('aria-current');
});

this.sliderControlButtons[slide].classList.add('slider-counter__link--active');
this.sliderControlButtons[slide].setAttribute('aria-current', true);

this.slideScrollPosition = slide * this.sliderItems[0].clientWidth;

this.slider.scrollTo({
left: this.slideScrollPosition
});

if(this.sliderCounter) {
this.sliderCounter.value = slide;
}

if(this.querySelector('.dot')) {
const controlWidth = this.querySelector(`[data-dot='${0}']`).clientWidth;
const controlOffset = this.querySelector(`[data-dot='${slide}']`).offsetLeft;
this.querySelector(`[data-dot='${slide}']`).scrollIntoView({block: "nearest", inline: "center"});
this.querySelectorAll(`.dot`).forEach(dot => dot.classList.remove('mediumDot'));
this.querySelectorAll(`.dot`).forEach(dot => dot.classList.remove('smallDot'));

if (controlOffset > controlWidth * 10){
if(slide > 4 && slide < this.sliderItems.length - 5) {
this.querySelector(`[data-dot='${slide - 5}'] > .dot`).classList.add('smallDot');
this.querySelector(`[data-dot='${slide - 4}'] > .dot`).classList.add('mediumDot');
}
}

if (controlOffset < (controlWidth * 10) + (controlWidth * (this.sliderItems.length - 1)) ){
if(slide > 4 && slide < this.sliderItems.length - 5) {
this.querySelector(`[data-dot='${slide + 4}'] > .dot`).classList.add('mediumDot');
this.querySelector(`[data-dot='${slide + 5}'] > .dot`).classList.add('smallDot');
}
}
}
}

onButtonClick(event) {
event.preventDefault();
if(event.currentTarget.name === 'next') {
this.step++;
if(this.step > this.sliderItems.length - 1) {
this.step = 0
}
} else {
this.step--;
if(this.step < 0) {
this.step = this.sliderItems.length - 1
}
}
this.currentIndex(this.step);
}


linkToSlide(event) {
const dotIndex = event.currentTarget.dataset.dot;
this.step = dotIndex;
this.currentIndex(this.step);
}

currentIndex(index) {
this.update(index);
}

sliderCounterUpdate(event) {
event.preventDefault();
this.step = this.sliderCounter.value;
this.currentIndex(this.step);
}
}

customElements.define('universal-slider-component', UniversalSliderComponent);
Copied!
Back to blog

2 comments

What seems to be the problem. If you cannot see the code, please follow the steps mentioned above. You can also contact me at chat with us

Made4uo

I bought the code and it does not work correctly, can you correct it please

Guillermo

Leave a comment