在Blazor服务器中使用flickity

Question

我正在尝试使用flickity js库(https://flickity.metafizzy.co/)在我的Blazor服务器应用程序中。出于某种原因，我无法让它发挥作用，尽管我尝试了很多不同的场景。

这就是现在的样子：

1. 我在_Host.chtml中添加了CSS和javascript文件

<link href="https://npmcdn.com/flickity@2/dist/flickity.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js" crossorigin="anonymous"></script>

2. 我在页面中添加了转盘的代码：

<div class="main-carousel">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
</div>

3. 在_Host.chtml中，我创建了这个函数：

window.initF = () => {
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true
});
}

4. 在页面中，我尝试启动它：

@inject IJSRuntime js
@functions{
protected async override Task OnAfterRenderAsync(bool firstrender)
{
if (firstrender)
{
await js.InvokeAsync<object>("initF");
firstrender = false;
}
}
}

但由于某种原因，它不起作用。

一个知道我缺少什么的人？

Answer 1

这对我来说似乎很好。

我在blazorfiddle中尝试过，并从图书馆的网站上获得了CSS，其工作原理与他们在那里的演示类似。见附件

你能从代码中删除一行分配firstrender值的代码吗？因为这是自动处理的：

protected async override Task OnAfterRenderAsync(bool firstrender)
{
if (firstrender)
{
await js.InvokeAsync<object>("initF");
// firstrender = false; <- remove this assignment
}
}