Slick library horizontally sliding the entire website

Technical Q&A

Topic summary

Main issue: Implementing a logo slider with the Slick (jQuery carousel) library on Shopify’s Ride theme caused the entire page to slide horizontally, indicating layout overflow.

Context: User shared Liquid and JS snippets (initializing Slick with slidesToShow: 7 on .carousel-slide). A preview link was provided for inspection.

Fix: Add container CSS to the slider section to constrain layout:

  • position: relative
  • margin: 0 auto
  • padding: 15px
  • width: 90%
    This adjustment prevented the page-wide horizontal scroll by properly sizing and centering the carousel container.

Outcome: The user confirmed the CSS change resolved the issue.

Notes:

  • Slick is a jQuery plugin for creating carousels. The observed behavior typically stems from container sizing/overflow, which the added CSS addresses.
  • No further disagreements or open questions were raised.

Status: Resolved.

Summarized with AI on February 7. AI used: gpt-5.
1

Hi, hope everyone is keeping well.

I’m using Shopify’s free theme “Ride”. I’m making a logo list using slick library, it is working fine but the entire website is sliding horizontally with it. I’m not sure what I’m doing wrong. I followed this tutorial: https://www.youtube.com/watch?v=7DqtFl2KaSg&t=458s. Shopify url: https://rojan-engine-gearboxes.myshopify.com/

Saba13_0-1664466711218.png
Saba13_0-1664466711218.png1366×628 148 KB

My code:

{{ 'slick.min.js' | asset_url | script_tag }}

  {%- if section.blocks.size > 0 -%}
  

    
    <i>
      {%- render 'arrow-left' -%}</i>
    <i>
      {%- render 'arrow-right' -%}</i>
    
 
      {%- for block in section.blocks -%}
      

        
        {%- if block.settings.link != blank -%}
        
          {%- endif -%}
        
          
          {%- if block.settings.image != blank -%}
          
          {% comment %}  
          {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
          {%- else -%}
          {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endcomment %}

            
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}

          {%- if block.settings.link != blank -%}
        
        {%- endif -%}
      

      {%- endfor -%}
    

  

  {%- endif -%}

{% schema %}
{
"name": "Slick slider",
"class": "index-section",
"settings": [
  
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Slick slider",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}

Javascript:

$(document).ready(function () {
  $('.carousel-slide').each(function() {
    var num_slides = 7;
    $(this).slick({
      slidesToShow: num_slides
    });
  });
});

Any help will be greatly appreciated. Thank you!

2

Hi @Saba13 ,

You can re-add the slider section and send me the preview link, I will help you check it

3

https://0ov63jicx64whbnq-61865099457.shopifypreview.com

4

Hi @Saba13 ,

Please add code here:

Screenshot.png
Screenshot.png970×618 45.5 KB

.carousel-container {
    position: relative;
    margin: 0 auto;
    padding: 15px;
    width: 90%;
}

Hope it helps!

5

Thank you for your response, this worked for me perfectly!

1 Like
6

Thank you for your response, this worked for me perfectly!

1 Like