collection list slider shopify

Add Collection List Slider - Shopify Themes

Log in or Sign up to ensure access to purchased code across multiple devices.

Add Collection List Slider

One Time Purchase!

$24.99
Only
Refresh after a purchase


Related Articles

Add Image Slider in Shopify Page

Add Image Slider in Shopify Page

Add Image Slider in Shopify Page

Advance Shopify Gallery Banner with Slider in your Page

Advance Shopify Gallery Banner with Slider in y...

Advance Shopify Gallery Banner with Slider in y...

Shopify Gallery Carousel Section for Page

Shopify Gallery Carousel Section for Page

Shopify Gallery Carousel Section for Page

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 all Shopify 2.0 FREE themes . Updated to latest version 12.0

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

What you are buying:

  • A slider for collections list
  • Options to change the card background and active border
  • Option to set how many items for desktop, tablet, and mobile
  • Included option to set the maximum width of the section
  • Added an option to hide the collection title
  • Option to show counter as dots, slider, and number
  • Added an option to show button on side

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away

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{% if section.settings.hide_title %} collection-title--hidden{% endif %}"
  style="
    padding-top: {{ section.settings.padding_top | append: "px" }};
    padding-bottom: {{section.settings.padding_bottom | append: "px" }};
    max-width: {{ section.settings.section_width | append: "px" }}
  "
>
  <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.heading_size }}">{{ 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}};">
    <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>
      <ul class="product-grid slider slider--tablet slider--everywhere " 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 %} {% if forloop.first %}image--active{% endif %}"
            {{ block.shopify_attributes }}
            style="--desktop-items: {{ section.settings.desktop_items }};--tablet-items: {{ section.settings.tablet_items }}; --mobile-items: {{ section.settings.mobile_items }}"
          >
            {% 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 == null
                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 == null 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>
 
      <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>
 
    {%- if block_length > 3 -%}
      <div class="sliderContainer{% unless section.settings.slider_visual == "slider" %} hidden{% endunless %}">
        <input type="range" min="0" max="{{block_length | minus: 1 }}" value="0" 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>
 
 
      <div
        class="slideshow__controls slider-buttons no-js-hidden {% if section.settings.slider_visual == 'slider' or section.settings.slider_visual == 'hide' %}hidden {% endif %}"
        style="display: flex; border: none"
      >
        <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 {% if forloop.first %}slider-counter__link--active{% endif %}"
                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": "range",
      "id": "section_width",
      "min": 900,
      "max": 2100,
      "step": 100,
      "default": 1200,
      "unit": "px",
      "label": "Section maximum width"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Collections",
      "label": "Title"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size",
      "info": "Only applicable to Shopify 2.0 Free themes latest versions"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "View all button"
    },
    {
      "type": "checkbox",
      "id": "hide_title",
      "default": false,
      "label": "Hide collection titles"
    },
    {
      "type": "header",
      "content": "Responsive settings"
    },
    {
      "type": "range",
      "id": "desktop_items",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4,
      "unit": "#",
      "label": "Number of collections in desktop"
    },
    {
      "type": "range",
      "id": "tablet_items",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 3,
      "unit": "#",
      "label": "Number of collections in tablet"
    },
    {
      "type": "range",
      "id": "mobile_items",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 2,
      "unit": "#",
      "label": "Number of collections in mobile"
    },
    {
      "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"
        },
        {
          "value": "hide",
          "label": "hide"
        }
      ],
      "default": "numbers",
      "label": "Counter",
      "info": "Only applies on mobile"
    },
    {
      "type": "checkbox",
      "id": "slider_button_fixed",
      "default": true,
      "label": "Show slider button on the side"
    }
  ],
  "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." Create a new CSS file and name it "collection-list-slider", then place the code below.

.collectionListSlider .card .media,
.collectionListSlider .slidecontainer,
universal-slider-component .card__media {
  width: 100%;
}
.collectionListSlider .slideshow__control-wrapper.slider {
  display: flex;
  align-items: center;
}
.collection-title--hidden .card__content {
  opacity: 0;
  height: 0;
}
.collectionListTitleWrapper {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.collectionListSlider:hover .sliderCounterBtn--prev,
.sliderCounterBtn--prev {
  left: 0;
}
.collectionListSlider:hover .sliderCounterBtn--next,
.sliderCounterBtn--next {
  right: 0;
}
.card--card .card__heading a::after,
.card--standard.card--text a::after,
.card__heading a::after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.card,
.card-information,
.collectionListSlider .card__heading {
  text-align: center;
}
.collectionListSlider {
  overflow: hidden;
  margin: 0 auto;
}
.collectionListSlider ul.product-grid.slider.slider--tablet {
  display: flex;
}
.collectionListSlider universal-slider-component {
  position: relative;
  display: block;
}
.collectionListSlider .card__information {
  padding-bottom: 10px;
  padding-top: 10px;
}
.collectionListSlider .collectionListTitle {
  margin: auto 0;
}
.collectionListSlider .featured-grid {
  display: flex;
  padding: 0;
}
.collectionListSlider .featured-grid li,
.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 0 1rem;
  width: 100%;
  padding-left: 0;
}
.collectionListSlider .collection-list__item {
  width: calc(100% / var(--desktop-items));
  padding: calc(0.5vw + 5px);
}
.collectionListSlider .slider__slide {
  padding: 0 1rem;
}
.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;
}
.collectionListSlider .slider-counter--dots,
.collectionListSlider .slider-counter--numbers {
  margin: 0;
}
.collectionListSlider
  .slider-counter__link--active.slider-counter__link--dots
  .dot {
  background-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,
.sliderCounterButton: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,
.slider-button:not([disabled]):hover {
  color: #000;
}
.collectionListSlider
  .slider-counter__link--active.slider-counter__link--numbers {
  text-decoration: underline;
  color: #000;
}
.collectionListSlider .slider-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.collectionListSlider .slider-button {
  color: rgba(0, 0, 0, 0.75);
  background: 0 0;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.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,
.sliderCounterBtn--prev > svg {
  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;
}
.collectionListSlider .slideshow__control-wrapper {
  overflow-x: auto;
}
.image--active {
  border: 5px solid var(--border-color);
}
.collectionListSlider .card--card.card--media .card__inner .card__information,
.collectionListSlider .card--card.card--media > .card__content .card__badge,
.collectionListSlider .card--card.card--text .card__inner,
.collectionListSlider
  .card--standard.card--text.article-card
  > .card__content
  .card__information,
.collectionListSlider
  .card--standard.card--text
  > .card__content
  .card__heading,
.collectionListSlider .card--standard > .card__content .card__badge,
.collectionListSlider .card--standard > .card__content .card__caption,
.collectionListSlider .counter--mobile {
  display: none;
}
.collectionListSlider .smallDot {
  width: 0.4rem !important;
  height: 0.4rem !important;
}
.collectionListSlider .mediumDot {
  width: 0.75rem !important;
  height: 0.75rem !important;
}
.collectionListSlider .sliderCounter {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  padding: 0;
  border-radius: 10px;
  background: #d3d3d3;
  outline: 0;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.sliderCounter:hover {
  opacity: 1;
}
.sliderCounter::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  margin: 10px 0;
  border-radius: 5px;
  background: #000;
  cursor: pointer;
}
.sliderCounter::-moz-range-thumb {
  height: 5px;
  margin: 10px 0;
  border-radius: 5px;
  background: #000;
  cursor: pointer;
}
.card--extend-height,
.card__inner:not(.ratio) > .card__content,
.collectionListSlider .card--card {
  height: 100%;
}
.sliderCounterBox {
  display: flex;
  align-items: center;
}
.sliderCounterButton {
  display: none;
  position: absolute;
  background: #000 !important;
  color: #fff !important;
  transition: 0.2s;
  z-index: 5;
}
.slider_button_fixed.sliderCounterBtn--prev {
  left: -100%;
}
.slider_button_fixed.sliderCounterBtn--next {
  right: -100%;
}
.sliderCounterBtn--next > svg {
  transform: rotate(-90deg);
}
.sliderCounterButton > svg {
  height: 2rem !important;
}
.card {
  text-decoration: none;
}
. collectionListSlider .card--card,
.collectionListSlider .card--standard .card__inner {
  position: relative;
  box-sizing: border-box;
}
.collectionListSlider .card--card:after,
.collectionListSlider .card--standard .card__inner:after {
  content: "";
  position: absolute;
  z-index: -1;
}
.collectionListSlider .card__inner .card__media {
  overflow: hidden;
  z-index: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.card--standard.card--text {
  background-color: transparent;
}
.collectionListSlider .card .media,
.collectionListSlider .card__media {
  bottom: 0;
  position: absolute;
  top: 0;
}
.card__media {
  margin: 0;
  width: calc(100% - 2 * 0rem);
}
.collectionListSlider .card__inner {
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}
.collectionListSlider .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--card.card--media > .card__content,
.card__heading {
  margin-top: 0;
}
.card__heading:last-child {
  margin-bottom: 0;
}
.card__heading a::after {
  content: "";
  position: absolute;
  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: rgba(0, 0, 0, 0.5) solid 0.2rem;
}
.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: rgba(0, 0, 0, 0.5) solid 0.2rem;
}
.card__heading a:focus,
.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}
.card__information:hover a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card__information:hover {
  transform: scale(1.05);
}
.card--standard > .card__content {
  padding: 0;
}
.card--extend-height.card--media,
.card--extend-height.card--standard.card--text {
  display: flex;
  flex-direction: column;
}
.card--extend-height.card--media .card__inner,
.card--extend-height.card--standard.card--text .card__inner {
  flex-grow: 1;
}
.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform 0.2s;
  overflow: hidden;
}
.card-information > * + * {
  margin-top: 0.5rem;
}
.card-information {
  width: 100%;
}
.card-information > * {
  color: #000;
}
.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;
}
.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}
.ratio::before {
  content: "";
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}
.hidden {
  display: none !important;
}
.collectionListSlider .card__content {
  margin: auto;
}
@media screen and (min-width: 750px) {
  .collectionListSlider {
    padding: 0 5rem;
  }
}
@media screen and (max-width: 750px) {
  .collectionListSlider .collection-list__item {
    width: calc(100% / var(--tablet-items));
  }
}
@media screen and (max-width: 481px) {
  .collectionListSlider .collection-list__item {
    width: calc(100% / var(--mobile-items));
  }
}
 



 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);

 

5. Make sure to SAVE.

That's it (",)

 

 

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