我使用了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;
})();
正确方向的任何一点都会非常感激。
答案 0 :(得分:0)
布鲁克林中的光滑滑块部分似乎已在主页中修复,我没有看到我们能够再次添加它,
所以我在主题中创建了另一个部分。将其命名为自定义滑块。代码如下。
{% 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 %}
这个光滑的幻灯片显示由自己的代码运行,因此它只监听自己的设置。
您可以检查光滑的滑块settings,为您添加更多设置。
如果您需要控制每个滑块的更多设置。您需要在架构中创建更多设置,就像这些一样。
如果您需要任何帮助,请随时与我联系。