Duplicating the theme is causing issues with my logo list

[Saba13]

Hi everyone

I created a sliding logo list using the slick library on Shopify’s Ride theme and is working perfectly but when I duplicate the published theme, the images in the logo list section don’t appear.

It’s working perfectly on the live theme but not on the duplicated theme. When I publish the duplicate theme, it still doesn’t show up. There is no error in the console and I have no idea what to do?

Unfortunately it’s hidden on the live theme but on the copy, you can see the image carousel should be where there is a long orange strip of colour above the rotating gear image.

Any help will be greatly appreciated. Thank you.

Live theme: https://rojan-engine-gearboxes.myshopify.com/

Copy theme: https://rgcux2qpiwstkez2-61865099457.shopifypreview.com

Logo-list.liquid

{{ 'logo-list.js' | asset_url | script_tag }}

<style>

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

  .carousel-slide {
    margin: 0 auto;
  	padding: 15px;
  }
  
</style>

<div class="carousel-container" id="carousel-container-{{ section.id }}" data-id="{{ section.id }}">
  {%- if section.blocks.size > 0 -%}
  <div class="horizontal-scroll" id="horizontal-scroll-{{ section.id }}">
    <!--------------------------------------- SLIDER ----------------------------------------->
    <div class="carousel-slide" id="carousel-slide-{{ section.id }}" 
         data-slick='{"autoplay": {{ section.settings.carousel_autoplay }}, 
                    "dots": {{ section.settings.carousel_dots }}}'
          data-slides='{{ section.settings.slides }}'> 
      {%- for block in section.blocks -%}
      <div class="slide-img" id="slide-img-{{ section.id }}">
        <!----------------------------------------- LINK ----------------------------------------->
        {%- if block.settings.link != blank -%}
        <a href="{{ block.settings.link }}" target="_blank">
          {%- endif -%}
          <!----------------------------------------- IMAGE ----------------------------------------->
          {%- if block.settings.image != blank -%}
            {% render 'responsive-image', logo_image: block.settings.image, columns: 7 %}
          {%- endif -%}

          {%- if block.settings.link != blank -%}
        </a>
        {%- endif -%}
      </div>
      {%- endfor -%}
    </div>
  </div>
  {%- endif -%}
</div>

{% schema %}
{
"name": "Slick slider",
"settings": [
  {
    "type":"header",
    "content":"Carousel option"
  },
  {
    "type": "checkbox",
    "id": "carousel_autoplay",
    "label": "Enable autoplay",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "carousel_dots",
    "label": "Enable dots",
    "default": false
  },
  {
    "type": "select",
    "id": "autoplay_speed",
    "label": "Change slides every",
      "options": [
      { "value": "1000", "label": "1 seconds" },
      { "value": "2000", "label": "2 seconds" },
      { "value": "3000", "label": "3 seconds" },
      { "value": "4000", "label": "4 seconds" },
      { "value": "5000", "label": "5 seconds" },
      { "value": "6000", "label": "6 seconds" },
      { "value": "7000", "label": "7 seconds" },
      { "value": "8000", "label": "8 seconds" },
      { "value": "9000", "label": "9 seconds" },
      { "value": "10000", "label": "10 seconds" }
    ],
    "default": "2000"
  },
  {
      "type": "range",
      "id": "slides",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 7,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    }
],
"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 %}

Logo-list.js

$(document).ready(function () {
  $('.carousel-slide').each(function() {
    var num_slides = $(this).data('slides');
    $(this).slick({
      infinite: true,
      /*prevArrow: '',
      nextArrow: '',*/
      dots: true,
      speed: 200,
      slidesToShow: num_slides,
      slidesToScroll: num_slides,
      responsive: [
     {
       breakpoint: 1024,
       settings: {
        slidesToShow: 5,
        slidesToScroll: 5,
        infinite: true,
       }
      },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
    });
  });
});