Re: How to disable vertical scrolling on horizontal carousel slider? Only horizontal swiping.

Solved

How to disable vertical scrolling on horizontal carousel slider? Only horizontal swiping.

webdev100
Excursionist
17 2 4

I have a custom block, similar to the "featured collections" section that is a slider of products I have it set to carousel so it should only be able to slide horizontally, not vertically. However, it clips out the bottom of the product card buy buttons, and leaves just a few pixels of vertical scrolling space that on desktop scrolls annoyingly, and on mobile while scrolling down the page it can take the whole block and move it around freely. I want the height to be fixed, and unscrollable and the slider to only move on the x axis, I tried using overflow-y: hidden and searching up a few other changes but it doesn't seem to activate. Please help!

 

Heres the website link with the block in question, https://canadavolumes.com/blogs/recipes/creamy-chicken-alfredo-pasta

 

Accepted Solution (1)

webdev100
Excursionist
17 2 4

This is an accepted solution.

Ok so I fixed it, just leaving the solution here for anyone else who encounters this problem. To fix it I went into the section code, adding a style="" to the class of the UL slider. The style for the css I put was: overflow-y: hidden; padding-bottom: 10px; which fixed the bottom being clipped issue. 

                 <slider-component class="slider-mobile-gutter slider-component-full-width {% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
                    <ul
                      id="Slider-{{ section.id }}"
                      data-id="{{ section.id }}"
                      class="grid product-grid contains-card contains-card--product{% if block.settings.quick_add == 'bulk' %} related-products-quick-add-bulk{% endif %}{% if settings.card_style == 'standard' %} contains-card--standard{% endif %}
                      grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down
                      {% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
                      role="list"
                      aria-label="{{ 'general.slider.name' | t }}"
                      style="overflow-y: hidden; padding-bottom: 10px;"
                    >

 

View solution in original post

Replies 3 (3)

TheUntechnickle
Shopify Partner
34 5 7

Hey there,

Please add this CSS to your base.css file:

@media screen and (min-width: 990px) {
  .slider--desktop {
    overflow-x: visible !important;
  }
}

 

Cheers!
Shubham | Untechnickle

We’re here to simplify your Shopify experience!
Let’s chat over a virtual coffee and find the perfect solution for your store.



Our Services: Store Build & Redesign | Theme Customization | Website Audit & Optimization | Bug Fixes | App Setups

webdev100
Excursionist
17 2 4

Your solution "works", but not the way I want it to and causes a whole bunch of other issues as well. If I make the overflow-x visible, it makes the bottom slider buttons which I have previous 1/x next unusable. Also, it only works on the desktop, i wish to mix for mobile as well without just making the width of the page as long as the unclipped overflow. I just want it to stay fixed vertically, is that possible?

webdev100
Excursionist
17 2 4

This is an accepted solution.

Ok so I fixed it, just leaving the solution here for anyone else who encounters this problem. To fix it I went into the section code, adding a style="" to the class of the UL slider. The style for the css I put was: overflow-y: hidden; padding-bottom: 10px; which fixed the bottom being clipped issue. 

                 <slider-component class="slider-mobile-gutter slider-component-full-width {% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
                    <ul
                      id="Slider-{{ section.id }}"
                      data-id="{{ section.id }}"
                      class="grid product-grid contains-card contains-card--product{% if block.settings.quick_add == 'bulk' %} related-products-quick-add-bulk{% endif %}{% if settings.card_style == 'standard' %} contains-card--standard{% endif %}
                      grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down
                      {% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
                      role="list"
                      aria-label="{{ 'general.slider.name' | t }}"
                      style="overflow-y: hidden; padding-bottom: 10px;"
                    >