PHP部分代码：
echo do_shortcode([
'code' => 'postslider',
'options' => [
"source" => "product", //数据类型
"count" => vc_get_theme_option('product-swiper-count', 12), //请求条数
"category" => $term_ids, //分类
"order" => "DESC", //排序
"loop" => vc_get_theme_option('product-swiper-loop', "no"), //无缝连接
"title-align" => vc_get_theme_option('product-swiper-title-align', "left"), //标题对齐
"title-location" => vc_get_theme_option('product-swiper-title-location', "static"), //标题位置
"title-line-count" => vc_get_theme_option('product-swiper-title-line-count', 2), //标题行数
"img-hover" => vc_get_theme_option('product-swiper-img-hover', "no"), //触摸变大
"title-bgcolor" => vc_get_theme_option('product-swiper-title-bgcolor', "#fff"), //标题遮盖层背景颜色
"image-style-enable" => vc_get_theme_option('product-swiper-image-style-enable', "no"), //启用图片样式
"image-height" => vc_get_theme_option('product-swiper-image-height', "auto"), //图片高度
"mobile-image-height" => vc_get_theme_option('product-swiper-mobile-image-height', "auto"), //小屏图片高度
"image-size" => vc_get_theme_option('product-swiper-image-size', "contain"), //图片尺寸
"title-font-enable" => vc_get_theme_option('product-swiper-title-font-enable', "no"), //启用标题样式
"title-font" => vc_get_theme_option('product-swiper-title-font', []), //标题样式
"title-font-hover-enable" => vc_get_theme_option('product-swiper-title-font-hover-enable', "no"), //启用标题悬浮样式
"title-font-hover" => vc_get_theme_option('product-swiper-title-font-hover', []), //标题悬浮样式
"effect" => vc_get_theme_option('product-swiper-effect', "slide"), //切换方式
"speed" => vc_get_theme_option('product-swiper-speed', 6), //灯片切换时长
"perview" => vc_get_theme_option('product-swiper-perview', 3), //显示数量
"mobile-count" => vc_get_theme_option('product-swiper-mobile-count', 3), //移动端显示数量
"spaceBetween" => vc_get_theme_option('product-swiper-spaceBetween', 10), //间距
"arrow" => vc_get_theme_option('product-swiper-arrow', "yes"), //显示箭头
"arrowColor" => vc_get_theme_option('product-swiper-arrowColor', ""), //箭头颜色
"arrow-size" => vc_get_theme_option('product-swiper-arrow-size', "44px"), //箭头大小
"pagination" => "no", //显示分页器
"autoplay" => vc_get_theme_option('product-swiper-autoplay', 1), //自由切换时长
]
]);
js部分代码：
parseOpts() {
return {
// 跑马灯灯片滑动时间
speed: this.parseMarquee(this.$opts.speed),
// 当开启跑马灯时，autoplay为灯片停顿时间，关闭跑马灯时为轮播图切换下一张图片的等待时间
autoplay: this.parseAutoplay(this.$opts.autoplay),
// 当开启跑马灯效果时，默认开启无缝链接
loop: this.$opts.loop === 'yes' || this.$opts.effect == 'marquee' ? true : false,
// 灯片之间的间距
spaceBetween: this.$opts.spaceBetween || 0,
// 是否允许鼠标滚轮切换灯片
mousewheel: this.$opts.mousewheel === 'yes',
// 是否允许键盘左右键切换灯片
keyboard: this.$opts.keyboard === 'yes',
// 轮播图切换灯片方式
effect: this.$opts.effect,
// 轮播容器能存放灯片张数
slidesPerView: this.$opts['mobile-count'] != 0 ? this.$opts['mobile-count'] : this.$opts.perview,
// 轮播图方向
direction: 'horizontal',
// 当没有足够的slide切换时，swiper失效且隐藏导航等。
watchOverflow: true,
// 更改swiper 的样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），每次 Swiper 都会更新（重新初始化）,开启跑马灯时不更新。
observer: this.$opts.effect !== 'marquee',
// 当Swiper的祖先元素变化时，Swiper更新,开启跑马灯时不更新
observeParents: this.$opts.effect !== 'marquee',
// 子slide更新时，swiper更新,开启跑马灯时不更新
observeSlideChildren: this.$opts.effect !== 'marquee',
// 轮播断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。
breakpoints: {
768: {
slidesPerView: this.$opts.perview,
}
},
// 上下切换按钮
navigation: {
nextEl: '.swiper-button-next__' + this.id,
prevEl: '.swiper-button-prev__' + this.id,
},
// 分页器按钮
pagination: {
el: '.swiper-pagination__' + this.id,
clickable: true,
type: this.parsePagination(this.$opts.paginationType)
},
// 是否开启淡入淡出效果
fadeEffect: {
crossFade: true,
}
}
},
现在注释spaceBetween后显示正常也可以自由切换幻灯片，如图所示：
没注释的情况下，箭头被元素被添加类名swiper-button-lock，设置为none，如图所示：
但是正常使用重写的组件时却没有问题，设置都是一样的，如图所示：
不知道问题出在哪里了，望解答一下！
