使用shopline原生滚动

shopline里面有原生的滚动轮播设置，里面的按钮齐全，可以使用原生的轮播配置（不改动配置），去做滚动设置也是一个很好的选择

//解释一下代码,整体的代码可以参考collection-list-new的代码内容，也可以自己去分析代码
 <script src="{{asset_url 'component-slider.js'}}" defer></script>
 
 {{assign "desktop_grid_cols" section.settings.desktop_grid_cols}}
 {{assign "mobile_grid_cols" section.settings.m_cols}}
 <!--slider-component标签是控制整个轮播滚动的 id="Slider-collection_list"这里的id，Slider-后面跟着任何内容都可以，只需要Slider-这个去设置就好，-->
  <slider-component class="slider-collection-list">
      <div
        id="Slider-collection_list"
        class="grid
          grid-cols-{{desktop_grid_cols}}-desktop
          grid-cols-{{mobile_grid_cols}}-tablet collection-list-new__slider__container slider
          {{#if scroll_mobile}}slider--mobile mobile-slider-full-screen{{/if}}
          {{#if full_in_mobile}}mobile-slider-full-screen slider--full{{/if}}
          {{#if (isTruthy is_rows_scroll)}}display-none-tablet{{/if}}
          "
        style="--mobile-cols:{{mobile_grid_cols}}"
      >
      <!--这里就开始轮播的内容，里面的class可以随意发辉--->
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试1测试1测试1测试1测试1
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试2测试2测试2测试2
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试3测试3测试3测试3测试3
    </div>
     <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试1测试1测试1测试1测试1
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试2测试2测试2测试2
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试3测试3测试3测试3测试3
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试3测试3测试3测试3测试3
    </div>
     <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试1测试1测试1测试1测试1
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试2测试2测试2测试2
    </div>
    <div class="collection-item col shopline-element-collection-item card-shadow-pb">测试3测试3测试3测试3测试3
    </div>
        
      </div>
      
    </slider-component>