文字按_title();内部光滑的滑块

Question

对于客户端，我需要创建一个使用自定义导航(箭头(的光滑滑块。唯一的事情是在导航中我需要实现WordPress标题。

每次单击箭头时，唯一需要更改的就是下一个上一个箭头标题。这个标题需要对应WordPress中的the_title();。

这是我的脚本：

$('.content-image').slick({
infinite: true,
dots: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
mobileFirst: !0,
asNavFor: ".content-image-content",
responsive: [
{ breakpoint: 1124, settings: { slidesToShow: 3, slidesToScroll: 1 } },
{ breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1 } },
{ breakpoint: 768, settings: { slidesToShow: 3, slidesToScroll: 1 } },
{ breakpoint: 567, settings: { slidesToShow: 3, slidesToScroll: 1 } }
],
});
$('.content-image-content').slick({
dots: false,
arrows: true,
infinite: true,
fade: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: '<div class="content-image-arrow prev slick-arrow" style=""><img src="/wp-content/themes/axia/img/icons/next-white.svg"/></div>',
nextArrow: '<div class="content-image-arrow next slick-arrow" style=""><img src="/wp-content/themes/axia/img/icons/next-white.svg"/></div>',
asNavFor: ".content-image",
});

StackOverflow社区中有人可以帮助我解决这个问题吗？

Answer 1

那将更像是一个"光滑滑块"；比"；worpress"；问题；-(

尽管如此：

一种可能的解决方案是为包含文章标题的每张幻灯片添加一个数据属性。

之后，您必须添加一个"；afterChange(slick，currentSlide("；回调函数到光滑滑块配置。每当访问者向前或向后滑动时，Slick都会调用该函数。

回调函数可以

• 从当前幻灯片前后的幻灯片中检索数据属性
• 用类"改变div；光滑的下一个"/"光滑的前一个"；相应地

来自萨尔茨堡的问候，

• 约翰内斯