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); |
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
I bought the code and it does not work correctly, can you correct it please