vue3中使用swiper7

普通vue3项目:
 
win10的小伙伴我们可以先在桌面(或者文件夹里)按住Shift之后点击右键打开Powershell窗,不是的自己打开cmd,效果是一样的。
 
之后在命令行里面输入vue create vue3
 
接着选择创建默认的vue3项目
 
接着用VSCode编辑器打开项目,在命令输入npm i swiper,成功后package.json文件中会标上
 
接着我在官网找了个功能比较全的代码作为例子,如下:
 
<template>
 
  <swiper
 
    :modules=”modules”
 
    :slides-per-view=”3″
 
    :space-between=”50″
 
    navigation
 
    :pagination=”{ clickable: true }”
 
    :scrollbar=”{ draggable: true }”
 
    @swiper=”onSwiper”
 
    @slideChange=”onSlideChange”
 
  >
 
    <swiper-slide>Slide 1</swiper-slide>
 
    <swiper-slide>Slide 2</swiper-slide>
 
    <swiper-slide>Slide 3</swiper-slide>
 
    …
 
  </swiper>
 
</template>
 
<script>
 
  // import Swiper core and required modules
 
  import { Navigation, Pagination, Scrollbar, A11y } from ‘swiper’;
 
  // Import Swiper Vue.js components
 
  import { Swiper, SwiperSlide } from ‘swiper/vue’;
 
  // Import Swiper styles
 
  import ‘swiper/css’;
 
  import ‘swiper/css/navigation’;
 
  import ‘swiper/css/pagination’;
 
  import ‘swiper/css/scrollbar’;
 
  // Import Swiper styles
 
  export default {
 
    components: {
 
      Swiper,
 
      SwiperSlide,
 
    },
 
    setup() {
 
      const onSwiper = (swiper) => {
 
        console.log(swiper);
 
      };
 
      const onSlideChange = () => {
 
        console.log(’slide change’);
 
      };
 
      return {
 
        onSwiper,
 
        onSlideChange,
 
        modules: [Navigation, Pagination, Scrollbar, A11y],
 
      };
 
    },
 
  };
 
</script>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64808.shtml

张贴在3