Vue encapsulates Swiper to achieve image carousel effect, vueswiper

Vue encapsulates Swiper to achieve image carousel effect, vueswiper

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

I. Swiper

Before encapsulation, we will introduce Swiper.

• Swiper is a Javascript-only slide special effect plug-in designed for mobile terminals such as mobile phones and tablets.
• Swiper can achieve common effects such as touch screen focus, touch screen Tab switching, and touch screen multi-map switching.
• Swiper is an open-source, free, stable, easy to use, and powerful website for mobile terminals.

Swiper has a wide range of application scenarios and achieves good results. The following is a typical application scenario of Swiper.

 

For more information about Swiper, see Swiper.
.

Ii. Vue Components

Vue components are designed to work together to improve maintainability and reusability. Image carousel is suitable for the use of components. Therefore, before introducing the specific implementation, we will first introduce the Vue components and component communication.

The most common component in A Vue is to form A parent-child relationship: component A uses component B in its template.

They must communicate with each other: the parent component may send data to the child component, and the child component may inform the parent component of what happened inside the child component. However, it is 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, thus improving the maintainability and reusability of each component.

In Vue, the relationship between parent and child components can be summarized as prop downstream transmission, and event upstream transmission. The parent component sends data to the child component through prop, and the child component sends messages to the parent component through events.

 

3. encapsulation implementation

1. Introduce Swiper

First, install Swiper.

npm install --save swiper

Then, you need to reference two files.

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

2. HTML code

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

<Template> <div class = "swiper-container": class = "swipeid"> <div class = "swiper-wrapper"> <! -- Store specific carousel content --> <slot name = "swiper-con"> </slot> </div> <! -- Page sharer --> <div: class = "{'swiper-pagination': pagination}"> </div> </template>

The named slot is used to improve decoupling so that different carousel content is set according to different situations when the parent component is used.

In addition, you need to set the page splitter, that is, the page indicator in the image carousel, common indicators such as small dots, or digital indicators.

3. initialize Swiper

Since Swiper is encapsulated to implement carousel images, Swiper has been installed before, so we need to initialize it now.

Before initialization, based on the Swiper usage, determine the attributes required by the carousel component, and then pass the parent component to the encapsulated Swiper component.

In this case, you need to use props.

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 } }

The following describes the meaning of each attribute one by one.

Attribute	Description
Swiped	Class Name of the class Attribute of the carousel container.
Effect	The default image switching effect is "slide". You can also set it to "fade", "cube", "coverflow", and "flip". For more information, see effect.
Loop	If it is set to true, loop mode is enabled. Loop mode: several images will be copied before and after the original image and switched when appropriate, so that Swiper looks like a loop. For details, see loop.
Direction	The slide direction of the image. You can set either horizontal or vertical. For details, see direction.
Pagination	Use paging navigation. For details, see pagination.
PaginationType	The style type of the page splitter. It can be set to "bullets", "fraction", "progressbar", and "custom". For details, see type.
AutoPlay	Set to true to enable automatic switch and use the default switch settings. For more information, see autoplay.

After understanding the meaning of each of the above attributes, We can initialize Swiper and set specific attributes.

Two parameters are required when Swiper is initialized.

• The Class Name of the carousel container.
• Objects that represent the detailed functions of the image carousel component

Var that = this; this. dom = new Swiper (". "+ that. swipeid, {// loop: that. loop, // pagination: {el :". swiper-pagination ", bulletClass: 'swiper-pagination-Bullet',}, // paginationType: that. paginationType, // autoPlay: that. autoPlay, // ction: that. direction, // effect: that. effect, // After the user operates swiper, autoplay disableOnInteraction: false is not prohibited. // swiper observer is automatically initialized when swiper itself or sub-elements are modified. true, // when swiper's parent element is modified, swiper observeParents: true} is automatically initialized });}

Iv. Custom carousel Effect

After the above steps, the carousel is encapsulated. We can customize the carousel effects we want. The following uses zhihu's API as an example to implement image carousel.

1. HTML code

<m-swipe swipeid="swipe" ref="swiper" :autoPlay="3000" effect="slide">  <div v-for="top in tops" :key="top.id" class="swiper-slide" slot="swiper-con" >    
First, reference the registration component, which is not detailed here.
M-swipe is the previously implemented image carousel component, and the child component is the carousel content inserted through the specified slot.
2. CSS code
.swiper-container { width: 100%; } .swiper-slide { height: 8rem; overflow: hidden; position: relative; }.swiper-slide { div { 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; }
Whereswiper-pagination-bullet-active The class name that represents the dot currently indicated in the page splitter. . Swiper-pagination-bullets indicates the Class Name of the page splitter. For details, see the Class Name of the elements in the pagination page splitter.
The code for displaying network request data will not be pasted. The Source Code address is shown below.
3. Results
 
This is just a simple encapsulation effect. To achieve more results, you can achieve it through more functions provided by Swiper.
Github address: Image carousel
Summary
The above is a small series of Vue encapsulation Swiper for image carousel effect, hope to help you, if you have any questions, please leave a message, the small series will reply to you in a timely manner. Thank you very much for your support for the help House website!