FlickityCall - 以编程方式上一个/下一个事件

Question

为了正确处理我的轮播，我使用了轻弹。

它工作正常，但我目前正在尝试使用自定义按钮导航。

文档说打电话给carousel.flickity("next")- 我试过了，但我似乎不起作用。

import * as Flickity from 'flickity';
this.$elem = value.nativeElement;
this.carousel = new Flickity(this.$elem, {
accessibility: true,
prevNextButtons: false,
pageDots: false,
setGallerySize: false,
draggable: true,
freeScroll: true
});

是否有等效物使用 javascript/typescript 以编程方式调用下一个事件？

Answer 1

嘿，我有一个解决方案。使用查询选择器访问给定的下一个按钮的 Flickity，并以编程方式在自定义按钮上单击它们 onClick 函数。您可以使用css隐藏Flickity给出的按钮。这是一个解决方法，但不是基于官方文档。

/* 
In my case I inspected the button given by Flickity and accessed those in my JS or TS file 
*/
let temp:any = document.querySelector('.flickity-button.flickity-prev-next-button.next');
temp.click();

在 CSS 文件中，您可以添加隐藏的可见性属性，以便按钮功能完好无损，无法以编程方式单击，但在 UI 中不会按预期找到 Flikity 按钮。

.flickity-button {
position: absolute;
visibility: hidden;
border: none;
color: #8c6238 !important;
}