add keyboard and virtual

src/App.vue

@@ -1,10 +1,11 @@
 <template>
   <swiper
-    virtual
+    :virtual="true"
     :direction="'vertical'"
     :slidesPerView="1"
     :spaceBetween="0"
     :mousewheel="true"
+    :speed="800"
     :pagination="{
       clickable: true,
     }"
@@ -16,17 +17,16 @@
     @swiper="onSwiper"
     @slideChange="onSlideChange"
     :modules="modules"
-    class="mySwiper"
   >
-    <swiper-slide>Slide 1</swiper-slide>
-    <swiper-slide>Slide 2</swiper-slide>
-    <swiper-slide>Slide 3</swiper-slide>
-    <swiper-slide>Slide 4</swiper-slide>
-    <swiper-slide>Slide 5</swiper-slide>
-    <swiper-slide>Slide 6</swiper-slide>
-    <swiper-slide>Slide 7</swiper-slide>
-    <swiper-slide>Slide 8</swiper-slide>
-    <swiper-slide>Slide 9</swiper-slide>
+    <swiper-slide :key="0" :virtualIndex="0">Slide 0</swiper-slide>
+    <swiper-slide :key="1" :virtualIndex="1">Slide 1</swiper-slide>
+    <swiper-slide :key="2" :virtualIndex="2">Slide 2</swiper-slide>
+    <swiper-slide :key="3" :virtualIndex="3">Slide 3</swiper-slide>
+    <swiper-slide :key="4" :virtualIndex="4">Slide 4</swiper-slide>
+    <swiper-slide :key="5" :virtualIndex="5">Slide 5</swiper-slide>
+    <swiper-slide :key="6" :virtualIndex="6">Slide 6</swiper-slide>
+    <swiper-slide :key="7" :virtualIndex="7">Slide 7</swiper-slide>
+    <swiper-slide :key="8" :virtualIndex="8">Slide 8</swiper-slide>
   </swiper>
 </template>
 <script>
@@ -39,7 +39,7 @@ import 'swiper/css/pagination'
 import './style.scss'
 
 // import required modules
-import { Mousewheel, Pagination, Virtual } from 'swiper'
+import { Mousewheel, Pagination, Virtual, Keyboard } from 'swiper'
 
 export default {
   components: {
@@ -48,15 +48,17 @@ export default {
   },
   setup() {
     const onSwiper = swiper => {
-      console.log(swiper)
+      // console.log(swiper)
     }
-    const onSlideChange = () => {
-      console.log('slide change')
+    const onSlideChange = swiper => {
+      const { activeIndex } = swiper
+      console.log(swiper)
+      console.log(activeIndex)
     }
     return {
       onSwiper,
       onSlideChange,
-      modules: [Mousewheel, Pagination, Virtual],
+      modules: [Mousewheel, Pagination, Virtual, Keyboard],
     }
   },
 }