小编Pap*_*Pot的帖子

我目前正在与 svelte 合作，使用 SwiperJs 创建平滑的自动滑块。看来我无法创建该动画。加载页面时，自动播放似乎不起作用。以下是让我做到这一点的附加组件：

<Swiper 
slidesPerView={2}
autoplay={{
    delay: 1,
    disableOnInteraction: false,
}}
speed={5000}
loop={true}
pagination={{
  clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
>

3张幻灯片的内容每次引用的对象都不同。

<SwiperSlide >
  <div class="workGridContainer">
    {#each workLinks as work}
      <div class="workCell {work.id}">
        <img class="workImg" src={work.imageLink} alt={work.id} />
        <h2 class="gridTitle">{work.title}</h2>
        <p>{work.description}</p>
        <a href={work.source} target="blank">Visit</a>
      </div>
    {/each}
 </div>
<SwiperSlide />

我正在导入模块，例如

import { Swiper, SwiperSlide }from "swiper/svelte";
import { Autoplay, Pagination, Navigation } from "swiper";