Existe-t-il un plugin d'image carrousel pour vue.js ?

vue.js possède des plug-ins de diagramme de carrousel, tels que vue-concise-slider, qui est un composant de carrousel basé sur Swiper4 et adapté à Vue. Il prend en charge le rendu côté serveur et les applications de vue d'une seule page ; -configuration géniale-swiper Simple, prend en charge adaptatif/plein écran + boutons + pagination, et est compatible avec les mobiles et les PC.

plug-in carrousel vue.js vue-awesome-swiper

vue-awesome-swiper est basé sur Swiper4 , un composant carrousel adapté à Vue, prenant en charge le rendu côté serveur et les applications monopage.

vue-awesome-swiper est basé sur swiper. L'installation de différentes versions de vue-awesome-swiper correspond à différents swiper, donc la plupart des attributs de swiper peuvent être appliqués à vue-awesome-swiper, ou selon. swiper Document pour définir les propriétés de vue-awesome-swiper ;

documentation officielle de swiper : https://www.swiper.com.cn/api/index2.html

Installation :

npm install vue-awesome-swiper --save

Utilisation de l'importation :

// import 
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// mount with global 
Vue.use(VueAwesomeSwiper)

// mount with component
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

Affichage du boîtier et exemple de code :

https://surmon-china github.io/vue-awesome-swiper/

Notez les modifications de version

à partir de la version 2.6.0. , vous devez introduire manuellement le CSS de swiper

import 'swiper/dist/css/swiper.css'

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!