vue.js용 캐러셀 이미지 플러그인이 있나요?

vue.js에는 Swiper4를 기반으로 하고 Vue에 적합한 캐러셀 구성 요소인 vue-concise-slider와 같은 캐러셀 차트 플러그인이 있으며 vue-awesome-swiper를 지원합니다. 구성이 간단하고 자동 적응/전체 화면 + 버튼 + 페이징을 지원하며 모바일과 PC 모두와 호환됩니다.

vue.js 캐러셀 차트 플러그인 vue-awesome-swiper

vue-awesome-swiper는 Swiper4 기반 캐러셀 구성 요소이며 Vue에 적합하며 서버 측 렌더링 및 단일 페이지 애플리케이션을 지원합니다. .

vue-awesome-swiper는 swiper를 기반으로 합니다. 다양한 버전의 vue-awesome-swiper를 설치하면 서로 다른 swiper에 해당하므로 swiper의 대부분의 속성을 vue-awesome-swiper에 적용할 수도 있습니다. swiper 문서 -awesome-swiper 속성;

swiper 공식 문서: https://www.swiper.com.cn/api/index2.html

설치:

npm install vue-awesome-swiper --save

가져오기 및 사용:

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

케이스 표시 및 샘플 코드:

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

버전 변경에 주의하세요

버전 2.6.0부터 , swiper의 CSS를 수동으로 소개해야 합니다

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요! !

위 내용은 vue.js용 캐러셀 이미지 플러그인이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!