我尝试添加Splide库来创建Next.js上的滑块（幻灯片）

3 年 ago
科, 颖
1 minute

首先

我在使用Next.js构建网站时，想要实现以下网站上类似的自动滑动幻灯片式的横幅功能。

 

image.png

根据我的调查，我发现在JavaScript中可以使用Slick，而在React中可以使用Splide，通过使用它们可以轻松实现所需功能。然而，尽管我尝试着使用它们，但结果并不理想。因此，以下是这些工具的介绍方法汇总。

请问您有什么问题？

使用以下方法将Next.js引入，但无法顺利使用。

 

$ npm install @splidejs/splide

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';

export default () => {
  return (
    <Splide
      options={ {
        rewind: true,
        gap   : '1rem',
      } }
      aria-label="お気に入りの写真"
    >
      <SplideSlide>
        <img src="image1.jpg" alt="Image 1"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image2.jpg" alt="Image 2"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image3.jpg" alt="Image 3"/>
      </SplideSlide>
    </Splide>
  );
}

引入方式 rù

 

通过进行此操作取得解决

$ npm i splide-nextjs --save

由于没有类型文件，否则会出错，因此我会在直接下面创建以下文件。

$ touch react-splide.d.ts

declare module "splide-nextjs/react-splide";

还可以以同样的方式使用。

        <Splide
          options={{
            rewind: true,
            width: window.innerWidth / 2,
            perPage: 2,
            type: "loop",
            autoplay: true,
            perMove: 1,
          }}
        >
          <SplideSlide>
            <img src="/bnr1.png" alt="Image 1" className="bnr" />
          </SplideSlide>
          <SplideSlide>
            <img src="/bnr2.jpg" alt="Image 2" className="bnr" />
          </SplideSlide>
          <SplideSlide>
            <img src="/bnr3.jpg" alt="Image 3" className="bnr" />
          </SplideSlide>
          </SplideSlide>
        </Splide>

最后

因为我曾经试图用CSS来完全实现它，但是感到绝望，所以能够使用这个库真是太好了。
我在网上几乎找不到关于如何在Next.js中使用它的信息，所以我尝试简单地总结了一下。
总之，我觉得这个工具非常方便。

请参考

 

bannerAds