Shulou(Shulou.com)05/31 Report--

This article mainly introduces "Vue package Swiper how to achieve picture carousel effect". In daily operation, I believe many people have doubts about how Vue package Swiper achieves picture carousel effect. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "Vue package Swiper how to achieve picture carousel effect"! Next, please follow the small series to learn together!

1. Swiper

Before implementing encapsulation, let's talk about Swiper.

Swiper is a sliding effect plug-in created by pure Javascript for mobile phones, tablets and other Mobile device.

Swiper can achieve common effects such as touch screen focus map, 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 device websites.

Swiper has a wide range of application scenarios and the implementation effect is very good. The following practical cases are typical application scenarios of Swiper.

II. Vue component

Vue components are designed to be used together to improve maintainability and reusability. Image carousel is suitable for using components to complete, so before describing the specific implementation, first introduce Vue components and component communication.

The most common of Vue components is the relationship that forms a parent-child component: Component A uses component B in its template.

They need to communicate with each other: a parent component might want to send data to its children, and a child component might want to tell its parent what's going on inside it. However, it is also important to decouple parent-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, parent-child relationships can be summarized as prop passes down and events pass up. The parent component delivers data to the child component through prop, and the child component sends messages to the parent component through events.

III. Packaging implementation

1. Introduction of Swiper

First, you need to 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 html layout of carousel in template.

Named slots are used to improve decoupling, so that when the parent component is used, different carousel contents are set according to different situations.

In addition, you need to set the pagination device, that is, the page indicator in the image carousel, such as a small dot, or a digital indicator.

3. Initialize Swiper

Since Swiper is encapsulated to implement carousels, Swiper has been installed before, so now you need to initialize the use.

Before initialization, the attribute information required by the carousel component is determined according to the knowledge of Swiper usage, and then passed to the encapsulated Swiper component through the parent component.

Props are needed 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 } }

The meaning of each attribute is explained below.

Attribute Meaning The class name of the swiped carousel container class attribute. effect Picture switching effect, default is "slide", can also be set to "fade", "cube", "overflow","flip", see effect for details. loop Set to true to turn on loop mode. loop mode: copies several images before and after the original image and switches at appropriate times to make the Swiper appear to loop, see loop for details. direction The sliding direction of the picture can be set horizontally or vertically. For details, see direction. Pagination uses pagination navigation, see pagination for details. paginationType Paginator style type, can be set to "bullets", "fraction", "progressbar", "custom", see type for details. AutoPlay is set to true to initiate automatic switching and uses the default switching settings, see autoplay for details.

Now that you understand what each of the above attributes mean, you can initialize Swiper and set specific attributes.

When initializing Swiper, you pass in two parameters.

Class name of carousel container

Objects representing detailed features 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', }, //pagination type: that.paginationType, //autoPlay: that.autoPlay, //direction: that.direction, //effect: that.effect, //autoplay disableOnInteraction: false, //automatically initializes the sniper observer when modifying the sniper itself or its child elements: true, //automatically initializes the wiper observeParents when modifying the parent element of the wiper: true }); }

IV. Custom carousel effect

After the above steps, the carousel is packaged. We can customize the carousel effect we want. The following is an example of how to realize picture carousel.

1. HTML code

{{top.title}}

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

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

2.CSS代码

.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%); } h4 { 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; }

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

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

3.效果

At this point, the study of "Vue package Swiper how to achieve picture carousel effect" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.