问题描述
使用PowerPack Pro for Elementor的TimeLine工具，设置Columns数量，默认的情况下，前端输出的两个slide使用相同的Columns数量。现在希望上面显示一个，下面的slide显示全部slide。因为初始化代码在插件里是固定的，为了不影响插件升级，我们需要在它初始化完成以后，对它的初始化参数进行修改。
解决方案1
销毁原来的slick实例，重新对下面的slide进行初始化。示例代码如下：
;(function($, window, document, undefined) {
'use strict';
var isEditMode = false;
var TimelineHook = function ( $scope, $ ) {
if ( ! $scope.hasClass( 'custom-time-line' ) ) {
return false;//只针对包含特定CSS类名的元素，防止影响其他普通的timeline
}
var $slider_nav = $scope.find( '.pp-timeline-navigation' );
$slider_nav.on('init', function(event, slick) {
if ( ! $slider_nav.hasClass('is-reset-slick') ) {
var cloumns = slick.$slides.length;//获取slide总数
$slider_nav.addClass('is-reset-slick');//添加重设标识，防止重复初始化
slick.unslick();//销毁原来的slick实例
$slider_nav.slick({
slidesToShow: cloumns,
slidesToScroll: cloumns,
asNavFor: '.pp-timeline-items',
dots: false,
infinite: true,
arrows: true,
//centerMode: false,
focusOnSelect: true,
prevArrow: '<div class="pp-slider-arrow pp-arrow pp-arrow-prev"><i class="fas fa-angle-left"></i></div>',
nextArrow: '<div class="pp-slider-arrow pp-arrow pp-arrow-next"><i class="fas fa-angle-right"></i></div>',
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 7,
slidesToScroll: 1
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
]
})
}
});
};
// ======================================================
// JQUERY DOCUMENT READY
// ------------------------------------------------------
$(document).ready(function() {
});
// ======================================================
// Window Size Change
// ------------------------------------------------------
$(window).resize(function() {
});
// ======================================================
// Window scroll Change
// ------------------------------------------------------
$(window).scroll(function() {
});
// ======================================================
// Elementor frontend hook
// ------------------------------------------------------
$(window).on('elementor/frontend/init', function () {
if ( elementorFrontend.isEditMode() ) {
isEditMode = true;
}
var widgets = {
'pp-timeline.default': TimelineHook
};
$.each( widgets, function( widget, callback ) {
elementorFrontend.hooks.addAction( 'frontend/element_ready/' + widget, callback );
});
});
})(jQuery, window, document);解决方案2
使用slickSetOption方法，对原有的slick实例进行修改，示例代码如下：
;(function($, window, document, undefined) {
'use strict';
var isEditMode = false;
var TimelineHook = function ( $scope, $ ) {
if ( ! $scope.hasClass( 'custom-time-line' ) ) {
return false;//只针对包含特定CSS类名的元素，防止影响其他普通的timeline
}
var $timeline = $scope.find( '.pp-timeline' ),
$timeline_card = $scope.find( '.pp-timeline-card' ),
$slider_nav = $scope.find( '.pp-timeline-navigation' ),
arrowNext = $slider_nav.find( '.pp-arrow.pp-arrow-prev' ),
arrowPrev = $slider_nav.find( '.pp-arrow.pp-arrow-next' );
$timeline.insertBefore($slider_nav);//把时间线调整到时间详情下方
/**
* 在标题与内容之间插入一个<hr>
* 然后把这三个元素包裹到<div class="jdw-time-line-content"></div>里面
*/
$timeline_card.each(function(index, el) {
if ( $(el).children('.pp-timeline-card-title-wrap').length > 0 && $(el).children('.pp-timeline-card-content') ) {
$(el).children('.pp-timeline-card-title-wrap').after('<hr>').end().children().slice(-3).wrapAll('<div class="jdw-time-line-content"></div>');
}
});
/**
* 在导航初始化以后重置部分参数
*
* infinite: false,//禁止内循环
* slidesToShow: slick.$slides.length,//按照slider数量显示全部slider
* slidesToScroll: slick.$slides.length,//按照slider数量设置每次滑动的距离，防止slider滚动
* prevArrow: arrowPrev,//重新设置导航箭头
* nextArrow: arrowNext//重新设置导航箭头
*/
$slider_nav.on('init', function(event, slick) {
var customArrows = '<div class="bottom-arrows"><div class="pp-slider-arrow pp-arrow pp-arrow-prev"><i class="fas fa-angle-left"></i></div><div class="pp-slider-arrow pp-arrow pp-arrow-next"><i class="fas fa-angle-right"></i></div></div>';
$slider_nav.after(customArrows);//添加自定义箭头导航
slick.slickSetOption({
slidesToShow: slick.$slides.length,
slidesToScroll: slick.$slides.length,
}, true);
});
};
// ======================================================
// JQUERY DOCUMENT READY
// ------------------------------------------------------
$(document).ready(function() {
});
// ======================================================
// Window Size Change
// ------------------------------------------------------
$(window).resize(function() {
});
// ======================================================
// Window scroll Change
// ------------------------------------------------------
$(window).scroll(function() {
});
// ======================================================
// Elementor frontend hook
// ------------------------------------------------------
$(window).on('elementor/frontend/init', function () {
if ( elementorFrontend.isEditMode() ) {
isEditMode = true;
}
var widgets = {
'pp-timeline.default': TimelineHook,
};
$.each( widgets, function( widget, callback ) {
elementorFrontend.hooks.addAction( 'frontend/element_ready/' + widget, callback );
});
});
})(jQuery, window, document);