How to implement image carousel by encapsulating Swiper in Vue-JS Tutorial-php.cn

Image carousel is a function that often needs to be implemented in the front end. I recently learned Vue.js and encapsulated Swiper to implement a simple image carousel component. Interested friends, let’s learn together

Picture carousel is a function that often needs to be implemented in the front end. I recently learned Vue.js and encapsulated Swiper to implement a simple image carousel component.

1. Swiper

Before implementing encapsulation, let’s introduce Swiper first.

Swiper is a sliding special effects plug-in created purely with Javascript, targeting mobile terminals such as mobile phones and tablets.
Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.
Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites.

Swiper has a wide range of application scenarios and the implementation effect is very good. The following actual case is a typical application scenario of Swiper.

For specific usage tutorials and detailed API of Swiper, please refer to Swiper Chinese website
.

2. Vue components

The original intention of Vue component design is to be used together to improve maintainability and reusability. The picture carousel is suitable to be completed using components, so before introducing the specific implementation, let's first introduce the Vue components and component communication.

The most common thing among Vue components is the relationship between parent and child components: component A uses component B in its template.

They must communicate with each other: the parent component may need to send data to the child component, and the child component may need to inform the parent component of what is happening inside it. However, it is also important to decouple parent and child components as much as possible through a well-defined interface. This ensures that the code of each component can be written and understood in a relatively isolated environment, thereby improving its maintainability and reusability.

In Vue, the relationship between parent and child components can be summarized as props are passed downwards and events are passed upwards. The parent component sends data to the child component through props, and the child component sends messages to the parent component through events.

##3. Encapsulation implementation

1.Introducing Swiper

First, you need to install Swiper.

npm install --save swiper

Copy after login

Then, two files need to be referenced.

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

Copy after login

2.HTML code

Set the html layout of the carousel image in the template.

<template>
 <p class="swiper-container" :class="swipeid">
  <p class="swiper-wrapper">
   <!-- 存放具体的轮播内容 -->
   <slot name ="swiper-con"></slot>
  </p>
  <!-- 分页器 -->
  <p :class="{&#39;swiper-pagination&#39;:pagination}"></p>
 </p>
</template>

Copy after login

Use named slots to improve decoupling, so that when the parent component is used, different carousel content can be set according to different situations.

In addition, you need to set up a pager, which is a page indicator in the image carousel. Common ones are small dots or digital indicators.

3. Initialize Swiper

Since Swiper is encapsulated to implement the carousel chart, and Swiper has been installed previously, it needs to be initialized now.

Before initialization, based on the understanding of Swiper usage, first determine the attribute information required by the carousel component, and then pass it to the encapsulated Swiper component through the parent component.

You need to use props at this time.

props: {
 swipeid: {
  type: String,
  default: ""
 },
 effect: {
  type: String,
  default: "slide"
 },
 loop: {
  type: Boolean,
  default: false
 },
 direction: {
  type: String,
  default: "horizontal"
 },
 pagination: {
  type: Boolean,
  default: true
 },
 paginationType: {
  type: String,
  default: "bullets"
 },
 autoPlay: {
  type: Number,
  default: 3000
 }
 }

Copy after login

The meaning of each attribute is explained one by one below.

AttributeMeaning##swipedeffectloopdirectionpaginationpaginationTypeautoPlay

了解了上面每个属性的含义，下面就可以初始化Swiper，并设置具体的属性。

初始化Swiper时，需要传入两个参数。

轮播容器的类名
代表图片轮播组件详细功能的对象

var that = this;
 this.dom = new Swiper("." + that.swipeid, {
  //循环
  loop: that.loop,
  //分页器
  pagination: { 
  el: ".swiper-pagination",
  bulletClass : &#39;swiper-pagination-bullet&#39;,
   },
  //分页类型
  paginationType: that.paginationType,
  //自动播放
  autoPlay: that.autoPlay,
  //方向
  direction: that.direction,
  //特效
  effect: that.effect,
  //用户操作swiper之后，不禁止autoplay
  disableOnInteraction: false,
  //修改swiper自己或子元素时，自动初始化swiper
  observer: true,
  //修改swiper的父元素时，自动初始化swiper
  observeParents: true
 });
 }

Copy after login

四、自定义轮播效果

经过上面的步骤，轮播器就封装好了。我们可以自定义实现自己想要的轮播器效果。下面以知乎的API为例，实现图片轮播。

1.HTML代码

<m-swipe swipeid="swipe" ref="swiper" :autoPlay="3000" effect="slide">
  <p v-for="top in tops" :key="top.id" class="swiper-slide" slot="swiper-con" >
  <img :src="top.image">
  <h3>{{top.title}}</h3>
  </p>
</m-swipe>

Copy after login

首先要引用注册组件，这里就不详细写出。

其中 m-swipe 就是前面实现的图片轮播组件，而其中的子组件就是通过具名插槽插入的轮播内容。

2.CSS代码

.swiper-container {
 width: 100%;
 }
 .swiper-slide {
 height: 8rem;
 overflow: hidden;
 position: relative;
 }
.swiper-slide {
 p {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0.4;
 position: absolute;
 background-color: @blue;
 }
 img {
 top: 50%;
 position: relative;
 transform: translate(0, -50%);
 }
 h3 {
 width: 70%;
 color: #fff;
 margin: 0;
 font-size: 0.5rem;
 line-height: 1rem;
 right: 5%;
 bottom: 2.6rem;
 text-align: right;
 position: absolute;
 text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
 &:before {
  content: "";
  width: 3rem;
  bottom: -0.6rem;
  right: 0;
  display: block;
  position: absolute;
  border: 2px solid @yellow;
 }
 }
}
.swiper-pagination-bullet-active {
 background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
 bottom: 1rem;
 width: 95%;
 text-align: right;
 }

Copy after login

其中 swiper-pagination-bullet-active 代表分页器中当前指示的小圆点的类名。 .swiper-pagination-bullets 代表分页器的类名，详情见pagination分页器内元素的类名。

关于网络请求数据展示的代码就不贴了，下面有源码地址。

3.效果

这只是一个简单的封装效果，想要实现更多的效果，可以通过Swiper中提供的更多功能来实现。

Github地址：图片轮播

上面是我整理给大家的，希望今后会对大家有帮助。

ajax请求+vue.js渲染+页面加载

在vue.js中如何使用ajax渲染页面

通过Node.js使用MySQL连接池

The above is the detailed content of How to implement image carousel by encapsulating Swiper in Vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

vue Image Carousel

source：php.cn

Previous article：What are the differences between export and export default in es6? Next article：How to perform mvvm-simple two-way binding in actual projects

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn


Carousel The class name of the container class attribute.
The switching effect of the picture, the default is "slide", and can also be set to "fade", "cube", "coverflow", "flip", See effect for details.
Set to true to enable loop mode. Loop mode: several pictures will be copied before and after the original picture and switched at the appropriate time, making Swiper appear to be looping. For details, see loop.
The sliding direction of the picture can be set to horizontal (horizontal) or vertical (vertical). For details, see direction.
Use pagination navigation, see pagination for details.
Paginator style type can be set to "bullets", "fraction", "progressbar", "custom", see type for details.
Set to true to start automatic switching and use the default switching settings. See autoplay for details.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to implement image carousel by encapsulating Swiper in Vue