collection list slider shopify

Collection List Slider for Dawn 3.0

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with Shopify 3.0 FREE 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. If you have other Shopify themes, you can use this universal code 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 "Collection List Slider", then replace the default code with the code below.

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

<div class="collectionListSlider" style= "padding-top: {{ section.settings.padding_top | append: "%" }}; 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">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="previous slide"
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 animate-arrow">
<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 }}%;">
<div 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 -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- endif -%}
{%- if card_collection.description == blank -%}<span class="icon-wrap">
<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>{% endif %}
</a>
</h3>
{%- if card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;
<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>
</p>
{%- endif -%}
</div>
</div>
</div>
{% if settings.card_style == 'card' or card_collection.featured_image %}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- endif -%}
{%- if card_collection.featured_image or card_collection.description == blank -%}<span class="icon-wrap">
<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>{% endif %}
</a>
</h3>
{%- if card_collection.featured_image == nil and card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;
<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"/>
</svg>
</span>
</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="next slide"
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="previous slide"
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"
data-dot="{{forloop.index0}}"
style="padding: 1rem; width: 100%"
aria-label="load-slide{{ forloop.index }} slider-of {{ 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="next slide"
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="load-slide{{ forloop.index }} slider-of {{ 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": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "adapt"
},
{
"value": "portrait",
"label": "portrait"
},
{
"value": "square",
"label": "square"
}
],
"default": "square",
"label": "Image ratio"
},
{
"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: 1rem;
padding-top: 1rem;
}

.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%;
}

}

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

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


.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-bottom: 1rem;
width: 100%;

}
.collectionListSlider .collection-list__item {
padding: 1.5rem;
border: 5px solid transparent;
}

.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(var(--color-foreground), 0.5);
padding: 0;
display: block;
}

.collectionListSlider .slider-counter__link--active.slider-counter__link--dots .dot {
background-color: rgb(var(--color-foreground));
}

@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: rgb(var(--color-foreground));
}

.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(var(--color-foreground), 0.5);
text-decoration: none;
}

.collectionListSlider .slider-counter__link--numbers:hover {
color: rgb(var(--color-foreground));
}

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

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

.collectionListSlider .slider-button {
color: rgba(var(--color-foreground), 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(var(--color-foreground));
}

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

.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 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;
}

.slider--tablet.grid--peek .grid__item {
width: 25%;
}
}

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

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

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

.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;
}

.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;
border-radius: 5px;
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;
padding: 5px;
border-radius: 5px;
margin: 10px 0;
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: 10;
}

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

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

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

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

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

.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: var(--card-text-alignment);
text-decoration: none;
}

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

.card--card,
.card--standard .card__inner {
border-radius: var(--card-corner-radius);
border: var(--card-border-width) solid rgba(var(--color-foreground), var(--card-border-opacity));
position: relative;
box-sizing: border-box;
}

.card--card:after,
.card--standard .card__inner:after {
content: '';
position: absolute;
width: calc(var(--card-border-width) * 2 + 100%);
height: calc(var(--card-border-width) * 2 + 100%);
top: calc(var(--card-border-width) * -1);
left: calc(var(--card-border-width) * -1);
z-index: -1;
border-radius: var(--card-corner-radius);
box-shadow: var(--card-shadow-horizontal-offset) var(--card-shadow-vertical-offset) var(--card-shadow-blur-radius) rgba(var(--color-shadow), var(--card-shadow-opacity));
}

.card .card__inner .card__media {
overflow: hidden;
/* Fix for Safari border bug on hover */
z-index: 0;
border-radius: calc(var(--card-corner-radius) - var(--card-border-width) - var(--card-image-padding));
}

.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: var(--card-text-alignment);
}

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

.card .media {
width: 100%;
}

.card__media {
margin: var(--card-image-padding);
width: calc(100% - 2 * var(--card-image-padding));
}

.card--standard .card__media {
margin: var(--card-image-padding);
}

.card__inner {
width: 100%;
}

.card--media .card__inner .card__content {
padding: calc(var(--card-image-padding) + 1rem);
position: relative;
}

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

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

.card__information {
grid-row-start: 2;
padding: 1.3rem 1rem;
}

@media screen and (min-width: 750px) {
.card__information {
padding-bottom: 1.7rem;
padding-top: 1.7rem;
}
}

.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: calc(0rem - var(--card-image-padding));
}

.card--standard.card--text a::after,
.card--card .card__heading a::after {
bottom: calc(var(--card-border-width) * -1);
left: calc(var(--card-border-width) * -1);
right: calc(var(--card-border-width) * -1);
top: calc(var(--card-border-width) * -1);
}

.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(var(--color-foreground), 0.3);
outline: 0.2rem solid rgba(var(--color-foreground), 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(var(--color-foreground), 0.3);
outline: 0.2rem solid rgba(var(--color-foreground), 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: 990px) {
.card .media.media--hover-effect > img:only-child,
.card-wrapper .media.media--hover-effect > img:only-child {
transition: transform var(--duration-long) ease;
}

.card:hover .media.media--hover-effect > img:first-child:only-child,
.card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
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 var(--duration-long) ease;
transform: scale(1.03);
}

.underline-links-hover:hover a {
text-decoration: underline;
text-underline-offset: 0.3rem;
}
}

.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--standard > .card__content .card__information {
padding-left: 0;
padding-right: 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 var(--duration-short) ease;
overflow: hidden;
}

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

.card-information {
width: 100%;
}

.card-information > * {
line-height: calc(1 + 0.4 / var(--font-body-scale));
color: rgb(var(--color-foreground));
}

.card-information > .price {
color: rgb(var(--color-foreground));
}

.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 {
margin-top: calc(6rem + var(--page-width-margin));
}
}

@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;
}

.collection__view-all {
margin-top: 2rem;
}

 4. Still at the Asset folder, open the global.js and add the code below. This javascript code share with other code I have, please check if you have "UniversalSldierComponent", if so, no need to do step #4. 

 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.sliderControlWrapper = this.querySelector('.slideshow__control-wrapper');

this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.slider-counter__link'));
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);

 

That's it. 

Copied!
Voltar para o blogue

Deixe um comentário