Showcase theme: product slider vertical align on mobile

[lenarei]

Dear community,

I am trying to change the way my product slider displays on mobile. It currently aligns all products horizontally in a slider carousel. This is perfect for desktop, so I would like to keep it there. But on mobile, I am trying to switch to a vertical align.

I have tested in my browser and found that changing 'swiper-container-horiztonal' to 'swiper-container-vertical' gives exactly the effect I am trying to produce. How can I ensure that 'swiper-container-horizontal' is used on desktop, while 'swiper-container-vertical' will be used on mobile? Is there a way to write if conditions based on the screen size?

    <div class="swiper-container product-list product-list--{{ section.settings.layout }}"
         data-products-in-view="{{ section.settings.grid }}">


    

      <div class="swiper-wrapper" data-normheights=".image" data-normheights-inner="img" {% if section.settings.no_margin_top %}style="margin-top: 0px;"{% endif %}>
        {% if section.settings.collection != blank %}
          {% assign collection = collections[section.settings.collection] %}
          {% for product in collection.products limit: 12 %}
            <div class="swiper-slide">
              {% assign animate_delay = forloop.index | times: 0.4 %}
              {% render 'product-block', product: product, product_class: product_class, i: forloop.index, animate: animate_delay, show_vendor: section.settings.show_vendor, show_custom_title: section.settings:show_custom_title, hide_swatches: section.settings.hide_swatches, hide_reviews: section.settings.hide_reviews %}
            </div>
          {% endfor %}

        {% else %}
          {% for i in (1..max_products) %}
            <div class="swiper-slide">
              {% assign animate_delay = forloop.index | times: 0.4 %}
              {% render 'onboarding-product-block', i: forloop.index, product_class: product_class, animate: animate_delay %}
            </div>
          {% endfor %}
        {% endif %}
      </div>

      <div class="swiper-scrollbar"></div>
      <a href="#" class="swiper-button-prev" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'svg-chevron-left' %}</a>
      <a href="#" class="swiper-button-next" aria-label="{{ 'general.accessibility_labels.next' | t | escape }}">{% render 'svg-chevron-right' %}</a>
    </div>

This is the preview to the copy I am currently working on: https://2s8y2j8j0etoqtd0-60850798810.shopifypreview.com

Any advice will be greatly appreciated!

[LitExtension]

Hi @lenarei,

Please send me screenshot of the section you want to change, I will check it for you

[lenarei]

Thanks @LitExtension, it is the first featured collection section on the landing page.

[LitExtension · Accepted solution]

Hi @lenarei,

Please go to theme.js file, find 'theme.FeaturedCollectionSection' and change code here:

theme.initProductSlider($swiperCont);

=>

if (window.innerWidth >= 768) {
  theme.initProductSlider($swiperCont);
}

 Hope it helps!