修改布魯克林主題中Shopify的每個幻燈片設置

Question

我正在使用Slick幻燈片插件附帶的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;
})();

朝正確方向的任何觀點將不勝感激。

Answer 1

布魯克林的滑動滑塊部分似乎已在首頁中修復，我看不到我們可以再次添加它，

所以我在主題中創建了另一個部分。 將其命名為“定制滑塊”。 代碼如下。

{% 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 %}

這張精美的幻燈片以其自己的代碼運行，因此僅監聽其自身的設置。

您可以檢查光滑的滑塊設置來為您添加更多設置。

如果需要為每個滑塊控制更多設置。 您需要像這樣在架構中創建更多設置。

如果您需要任何幫助，請隨時與我聯系。