Vue introduces the new vue-awesome-swiper plug-in,

Vue introduces the new vue-awesome-swiper plug-in,

This article introduces the new version of vue-awesome-swiper and shares it with you as follows:

Problem

1. Why is the pagination dot of my vue-awesome-swiper component not displayed?
2. Why does my vue-awesome-swiper not play automatically?
3. Why does my vue-awesome-swiper not exist?

Use

Introduction (the previous steps are the same as usual)

npm install vue-awesome-swiper --save

Introduce (global) in main and js ):

import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css'

(This may be the case if css is not displayed)

Component introduction:

Import 'swiper/dist/css/swiper.css '// It is not introduced globally. Remember here! Import {swiper, swiperSlide} from 'vue-awesome-swiper 'export default {components: {swiper, swiperSlide }}

Configuration

Template:

<swiper :options="swiperOption"><swiper-slide>I'm Slide 1</swiper-slide><swiper-slide>I'm Slide 2</swiper-slide><swiper-slide>I'm Slide 3</swiper-slide><div class="swiper-pagination" slot="pagination"></div> </swiper>

Script:

Export default {data () {return {swiperOption: {// All parameters are the same as the official api parameters of swiper //}}},...}

The focus is on the changes in swiperOption. The differences are as follows:

The original pagination and autoplay should be configured like this!

In the past, I was wrong in these two places, so pagination is not displayed and images are not carousel.

Before an error occurs:

After correction:

 

Summary

Vue-awesome-swiper official website has already released instructions, but I did not want to read them as soon as I read them all in English. In fact, it is easy to read and understand. learn the lessons and read more documents without using the demo.

It is still less dependent on plug-ins. Some plug-ins are updated at any time and can be created by yourself!

At pm, I realized that the original Swiper version distinguishes the component from the common version and cannot be written based on the original experience.

I found two or three articles about the latest vue-awesome-swiper on the Internet, but I didn't make it clear. So I wrote this article, hoping to help you and help you more.