NextJS开发：使用swiper实现轮播图

最新推荐文章于 2025-02-22 10:36:31 发布

ArslanRobot

最新推荐文章于 2025-02-22 10:36:31 发布

阅读量1.3k

点赞数 13

分类专栏： NextJS开发教程文章标签： NextJS reactjs

本文链接：https://blog.youkuaiyun.com/zhbzhb324/article/details/136052138

版权

安装swiper

npm i swiper

创建组件

一定要添加"use client"，作为客户端组件来使用
示例代码中的样式使用的tailwindcss

"use client"
import {
    Swiper, SwiperSlide } from "swiper/react"
import {
    Pagination } from 'swiper/modules';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import Image from "next/image"

function IndexCarousel() {
   

  return (
    <>
      <Swiper
        // install Swiper modules
        modules={
   [Pagination]}
        spaceBetween={
   0}
        slidesPerView={
   1}
        pagination={
   {
    clickable: true }}
        onSlideChange={
   () => console.log(