我将圆滑的轮播设置作为附加的变量。但是，由于我现在在同一页面上有多个轮播，每个轮播可能需要略有不同的设置。
这似乎在
中的唯一配置slickSettings对象的定义之内。仅创建一次并引用一次。如果这些slickSettings应该是唯一的，那么您需要为每个$(this).slick(slickSettings创建新的配置，并引用$( contentBlockClass + '-masonary__carousel').each(function() {
遍历页面上的每个轮播：
contentBlockData.data.masonary_carousel_arrow_position其中包含每个轮播的最高位置，最低位置，因此每个轮播的值均不同：slickSettings
如果不清楚，我需要在页面上每个转盘上使用多个唯一的var slickSettings = {
arrows: true,
dots: false,
infinite: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: '<a class="c-arrow"><span class="c-arrow__arrow"></span></a>',
prevArrow: '<a class="c-arrow c-arrow--left"><span class="c-arrow__arrow"></span></a>',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
}
var contentBlockClass = '.event-grid-image-over-text-carousel';
$( contentBlockClass + '-masonary__carousel').each(function() {
// @link https://github.com/kenwheeler/slick
// Get our unique ID
var uniqueId = $(this).attr('data-slick-count');
if (typeof contentBlockData === 'object') {
slickSettings.appendArrows = $('#event-grid-image-over-text-carousel-masonary-' + uniqueId + '__' + contentBlockData.data.masonary_carousel_arrow_position);
}
// Initiate Carousels
$(this).slick(slickSettings)
});
。
完整代码
Pre-request Script