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

2024-02-06 11:52

本文主要是介绍NextJS开发:使用swiper实现轮播图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

安装swiper

npm i swiper

创建组件

  1. 一定要添加"use client",作为客户端组件来使用
  2. 示例代码中的样式使用的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 modulesmodules={[Pagination]}spaceBetween={0}slidesPerView={1}pagination={{ clickable: true }}onSlideChange={() => console.log("slide change")}onSwiper={(swiper) => console.log(swiper)}><SwiperSlide className="w-full" style={{ background: "lightblue", height: 300 }}>Slide 1</SwiperSlide><SwiperSlide className="w-full" style={{ background: "lightblue", height: 300 }}>Slide 2</SwiperSlide><SwiperSlide className="w-full" style={{ background: "lightblue", height: 300 }}>Slide 3</SwiperSlide><SwiperSlide className="w-full" style={{ background: "lightblue", height: 300 }}>Slide 4</SwiperSlide></Swiper></>)
}export default IndexCarousel

使用组件

import IndexCarousel from "@/components/index/index-carousel"...return (<><div className="w-full max-w-screen-xl overflow-hidden"><IndexCarousel/></div></>)

使用图片作为轮播图,替换组件代码

return (<><Swiper// install Swiper modulesmodules={[Pagination]}spaceBetween={0}slidesPerView={1}pagination={{ clickable: true }}onSlideChange={() => console.log("slide change")}onSwiper={(swiper) => console.log(swiper)}><SwiperSlide><Image src={"/icon/banner1.jpg"}width={800} height={200} alt={""}className="rounded-md cursor-pointer w-full"/></SwiperSlide><SwiperSlide><Image src={"/icon/banner1.jpg"}width={800} height={200} alt={""}className="rounded-md cursor-pointer w-full"/></SwiperSlide><SwiperSlide><Image src={"/icon/banner1.jpg"}width={800} height={200} alt={""}className="rounded-md cursor-pointer w-full"/></SwiperSlide><SwiperSlide><Image src={"/icon/banner1.jpg"}width={800} height={200} alt={""}className="rounded-md cursor-pointer w-full"/></SwiperSlide></Swiper></>)

这篇关于NextJS开发:使用swiper实现轮播图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/684231

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖