Javascript 在Shopify的Brooklyn主题中修改每个幻灯片的设置

我使用的是布鲁克林Shopify主题，它与光滑的幻灯片插件一起提供。我已经通过部分设置了多个幻灯片，但我很难对每个幻灯片应用不同的设置（即一个幻灯片上的点位置指示器，另一个幻灯片上的箭头）。每个幻灯片都是在

theme.js.liquid

文件中的一个函数调用中初始化的，我知道我需要以某种方式将其分解，以针对单个幻灯片，但主题的编写方式让我感到困惑。javascript文件中有两段代码会影响幻灯片放映：

从第1527行开始：

var slickTheme = (function(module, $) {
'use strict';

// Public functions
var init, onInit, beforeChange, afterChange;

// Private variables
var settings, $slider, $allSlides, $activeSlide, $slickDots, windowHeight, scrolled, $heroText, $heroImage;
var currentActiveSlide = 0;

// Private functions
var cacheObjects, checkFirstOnIndex, setFullScreen, sizeFullScreen, setParallax, calculateParallax, slickColors, fixIE8; 
cacheObjects = function () {
slickTheme.cache = {
  $html      : $('html'),
  $window    : $(window),
  $hero      : $('#Hero'),
  $heroImage : $('.hero__image'),
  $headerWrapper: $('.header-wrapper')
};

slickTheme.vars = {
  slideClass      : 'slick-slide',
  activeClass     : 'slick-active',
  hiddenClass     : 'hero__slide--hidden',
  heroHeaderClass : 'hero__header'
};
};
init = function (options) {
cacheObjects();

// Default settings
settings = {
  // User options
  $element       : null,
  fullscreen     : false,
  parallax       : false,

  // Private settings
  isTouch        : Modernizr.touch ? true : false,

  // Slack options
  arrows         : false,
  dots           : true,
  adaptiveHeight : true
};
// Override defaults with arguments
$.extend(settings, options);

// Check if this hero is the first one on the home page
settings.isFirstOnIndex = checkFirstOnIndex();

// Absolutely position header over hero as soon as possible
if (settings.isFirstOnIndex) {
  slickTheme.cache.$headerWrapper.addClass(slickTheme.vars.heroHeaderClass);
}
/*
 * Init slick slider
 *   - Add any additional option changes here
 *   - https://github.com/kenwheeler/slick/#options
 */
settings.$element.slick({
  arrows         : settings.arrows,
  dots           : settings.dots,
  adaptiveHeight : settings.fullscreen ? false : settings.adaptiveHeight,
  draggable      : false,
  fade           : true,
  //autoplay       : theme.strings.slickAuto,
  //autoplaySpeed  : theme.strings.slickAutoSpeed,
  autoplay       : slickTheme.cache.$hero.data('autoplay'),
  autoplaySpeed  : slickTheme.cache.$hero.data('autoplayspeed'),
  onInit         : this.onInit,
  onBeforeChange : this.beforeChange,
  onAfterChange  : this.afterChange
});
};


  module = {
init: init,
onInit: onInit,
beforeChange: beforeChange,
afterChange: afterChange
  };

  return module;

}(slickTheme || {}, jQuery));

然后从2294年开始：

theme.SlideshowSection = (function() {

  function SlideshowSection(container) {

theme.initCache();

var $container = this.$container = $(container);
var sectionId = $container.attr('data-section-id');
var slideshow = this.slideshow = '#Hero';
//var autoplay = $(this.slideshow).attr('data-autoplay');
//var autoplay = $(this.slideshow).attr('data-autoplayspeed');

slickTheme.init({
  $element     : $(slideshow),
  fullscreen   : $(slideshow).data('fullscreen'),
  parallax     : $(slideshow).data('parallax'),
  autoplay       : $(slideshow).data('autoplay'),
  autoplaySpeed  : $(slideshow).data('autoplayspeed')
});

// remove header absolute display if slideshow is empty
if (!$(this.slideshow).hasClass('hero')) {
  $('.header-wrapper').removeClass('hero__header is-light is-dark');
}
}

  return SlideshowSection;
})();

---

如果方向正确，我们将不胜感激

布鲁克林的slick slider部分似乎已在主页中修复，我看不到我们能够再次添加它

因此，我在主题中创建了另一个部分。将其命名为自定义滑块。代码如下

{% comment %}
  Set hero as enabled so JS is loaded at end of index.liquid.
  Also set variables to control JS settings and appearance.

  hero_full_height variable is also available in Header section.
{% endcomment %}
{% assign hero_full_height = false %}
{% assign hero_parallax = false %}

{% comment %}
  If hero is first section on homepage, add class that sets
  negative top-margin for alignment and force full height.
{% endcomment %}

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {% if section.blocks.size > 0 %}
    <div class="hero-{{ section.id }} hero{% if hero_full_height %} hero--full-height{% endif %} hero--first" id="Hero-{{ section.id }}"{% if hero_full_height %} data-fullscreen="true"{% endif %}{% if hero_parallax %}data-parallax="true"{% endif %} data-autoplay="{{ section.settings.hero_home_auto }}" data-autoplayspeed="{{ section.settings.home_hero_auto_speed }}">
      {% for block in section.blocks %}

          <div class="hero__slide {{ block.settings.slide_text_color }} slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}" data-color="{{ block.settings.slide_text_color }}" {{ block.shopify_attributes }}>
            {% if hero_full_height %}
              {% if block.settings.image == blank %}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              {% else %}
                <noscript>
                  {% if forloop.first == true %}
                    <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
                  {% endif %}
                </noscript>
                {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
                  {% if forloop.first == true %}
                    src="{{ block.settings.image | img_url: '300x' }}"
                  {% endif %}
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                  data-sizes="auto"
                  data-parent-fit="cover"
                  alt="{{ block.settings.image.alt | escape }}">
              {% endif %}
            {% else %}
              {% if block.settings.image != blank %}
                <noscript>
                  {% if forloop.first == true %}
                    <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
                  {% endif %}
                </noscript>
                <div class="hero__image">
                  {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                  <img class="hero__image lazyload fade-in"
                    src="{{ block.settings.image | img_url: '300x' }}"
                    data-src="{{ img_url }}"
                    data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                    data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                    data-sizes="auto"
                    data-parent-fit="contain"
                    alt="{{ block.settings.image.alt | escape }}">
                </div>
              {% else %}
                <div class="hero__image">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              {% endif %}
            {% endif %}
            <div class="hero__text-wrap">
              <div class="hero__text-align">
                <div class="hero__text-content">
                  {% unless block.settings.slide_subheading == blank %}
                    <p class="hero__subtitle">
                      {{ block.settings.slide_subheading | escape }}
                    </p>
                  {% endunless %}
                  {% unless block.settings.slide_heading == blank %}
                    <h2 class="h1 hero__title">
                      {{ block.settings.slide_heading | escape }}
                    </h2>
                  {% endunless %}
                  {% unless block.settings.slide_cta == blank %}
                    <a href="{{ block.settings.slide_link }}" class="btn hero__cta">
                      {{ block.settings.slide_cta | escape }} <span class="icon icon-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endunless %}
                </div>
              </div>
            </div>
          </div>

      {% endfor %}
    </div>
  {% endif %}
</div>

 <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('#Hero-{{ section.id }}').slick({
             autoplay: {{ section.settings.hero_home_auto }},
             autoplaySpeed : {{ section.settings.home_hero_auto_speed }},
             dots : {{ section.settings.hero_dots }},
             arrows : {{ section.settings.hero_arrows }}
      });
    });
  </script>

{% schema %}
  {
    "name": "Custom Slider",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "hero_arrows",
        "label": "Show Prev / Next arrows",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "hero_dots",
        "label": "Show Dots",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "hero_home_auto",
        "label": "Auto rotate between slides",
        "default": true
      },
      {
        "type": "select",
        "id": "home_hero_auto_speed",
        "label": "Slide changes every",
        "options": [
            {
            "value": "1000",
            "label": "1 seconds"
          },
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      }
    ],
    "blocks" : [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "slide_text_color",
            "label": "Text color",
            "default": "is-dark",
            "options": [
              {
                "value": "is-light",
                "label": "Light"
              },
              {
                "value": "is-dark",
                "label": "Dark"
              }
            ]
          },
          {
            "type": "text",
            "id": "slide_subheading",
            "label": "Subheading text",
            "default": "An introductory"
          },
          {
            "type": "text",
            "id": "slide_heading",
            "label": "Heading text",
            "default": "Hero Banner"
          },
          {
            "type": "text",
            "id": "slide_cta",
            "label": "Button text",
            "default": "Shop now"
          },
          {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Custom Slider",
        "category": "Image"
      }
    ]
  }
{% endschema %}

{%comment%}
将hero设置为enabled，以便在index.liquid的末尾加载JS。
还可以设置变量来控制JS设置和外观。
hero_full_高度变量也可在收割台部分使用。
{%endcomment%}
{%assign hero\u full\u HEIGH=false%}
{%assign hero_视差=false%}
{%comment%}
若英雄是主页上的第一个部分，那个么添加设置的类
负顶部裕度用于对齐和强制全高。
{%endcomment%}
{%if section.blocks.size>0%}
{section.blocks%中的块的%s}
{%if-hero\u-full\u-height%}
{%if block.settings.image==blank%}
{%capture current%}{%cycle 1，2%}{%endcapture%}
{{'lifestyle-'| append:current | placeholder_svg_tag:'placeholder svg'}
{%else%}
{%if-forloop.first==true%}
{%endif%}
{%assign img_url=block.settings.image}img_url:'1x1'| replace:'u1x1'，'uu{width}x.%}
{%endif%}
{%else%}
{%if block.settings.image！=空白%}
{%if-forloop.first==true%}
{%endif%}
{%assign img_url=block.settings.image}img_url:'1x1'| replace:'u1x1'，'uu{width}x.%}
{%else%}
{%capture current%}{%cycle 1，2%}{%endcapture%}
{{'lifestyle-'| append:current | placeholder_svg_tag:'placeholder svg'}
{%endif%}
{%endif%}
{%block.settings.slide_副标题==空白%}

{{block.settings.slide|escape}

{%end除非%}
{%block.settings.slide_heading==blank%}
{{block.settings.slide_heading | escape}
{%end除非%}
{%block.settings.slide_cta==blank%}
{%end除非%}
{%endfor%}
{%endif%}
jQuery（文档）.ready（函数（）{
jQuery（'#Hero-{{section.id}}'）.slick({
自动播放：{section.settings.hero\u home\u auto}，
自动播放速度：{{section.settings.home\u hero\u auto\u speed}，
点：{section.settings.hero_dots}，
箭头：{{section.settings.hero_arrows}}
});
});
{%schema%}
{
“名称”：“自定义滑块”，
“最大积木”：6，
“设置”：[
{
“类型”：“复选框”，
“id”：“英雄之箭”，
“标签”：“显示上一个/下一个箭头”，
“默认值”：true
},
{
“类型”：“复选框”，
“id”：“英雄点”，
“标签”：“显示点”，
“默认值”：true
},
{
“类型”：“复选框”，
“id”：“英雄之家”，
“标签”：“在幻灯片之间自动旋转”，
“默认值”：true
},
{
“类型”：“选择”，
“id”：“home\u hero\u auto\u speed”，
“标签”：“幻灯片每小时更改一次”，
“选择”：[
{
“值”：“1000”，
“标签”：“1秒”
},
{
“价值”：“5000”，
“标签”：“5秒”
},
{
“价值”：“7000”，
“标签”：“7秒”
},
{
“价值”：“10000”，
“标签”：“10秒”
}
]
}
],
“区块”：[
{
“类型”：“幻灯片”，
“名称”：“幻灯片”，
“设置”：[
{
“类型”：“图像选择器”，
“id”：“图像”，
“标签”：“图像”
},
{
“类型”：“选择”，
“id”：“幻灯片\文本\颜色”，
“标签”：“文本颜色”，
“默认值”：“是暗的”，
“选择”：[
{
“值”：“是光”，
“标签”：“灯”
},
{
“值”：“是暗的”，
“标签”：“深色”
}
]
},
{
“类型”：“文本”，
“id”：“幻灯片副标题”，
“标签”：“副标题文本”，
“默认值”：“介绍性”
},
{
“类型”：“文本”，
“id”：“幻灯片标题”，
“标签”：“标题文本”，
“默认值”：“英雄旗帜”
},
{
“类型”：“文本”，
“id”：“幻灯片”，
“标签”：“按钮文本”，
“默认值”：“立即购买”
},
{
“t