I'm using the Brooklyn Shopify theme, which comes with the Slick slideshow plugin. I've got multiple slideshows set up via sections, but am having difficulty applying different settings to each slideshow (i.e. dot position indicators on one, arrows on another). Each slideshow is being initialized in one function call in the theme.js.liquid file, and I know I need to break this apart somehow to target individual slideshows, but the way the theme has it written has me stumped. There are two chunks of code in the javascript file that affect the slideshows:
Starting at line 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));
Then starting on 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;
})();
Any point in the right direction would be great appreciated.
