swiper is not working on web landscape view with MacBook trackpad

[qinwf]

screen recording:

swiper.mov.zip

example page:

swiper-on-desktop.zip

home page source code:

Index.vue.zip

vue 2.6.11, kbone-ui 0.6.2, tested on macbook pro 13-inch Chrome 79.0.3945.79

<template>
  <div class='content'>
    <k-swiper class='swiper-wrapper' indicator-dots=true>
      <k-swiper-item>
        <img src='https://loremflickr.com/320/240?lock=1'>
      </k-swiper-item>
      <k-swiper-item>
        <img src='https://loremflickr.com/320/240?lock=2'>
      </k-swiper-item>
      <k-swiper-item>
        <img src='https://loremflickr.com/320/240?lock=3'>
      </k-swiper-item>
    </k-swiper>
  </div>
</template>

<script>
import Vue from 'vue'
import { KSwiper, KSwiperItem } from 'kbone-ui'

export default Vue.extend({
  name: 'Home',
  components: {
    KSwiper,
    KSwiperItem,
  },
  created() {

  },
  methods: {

  },
})
</script>

<style lang="less">
.content {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: center;
  justify-items: center;

  .swiper-wrapper {
    width: 320px;
    height: 240px;
    .weui-swiper-item {
      width: 320px;
      height: 240px;
    }
    img {
      width: 320px;
      height: 240px;
    }
  }
}

</style>

[JimmyVV]

have you imported the kbone-ui.css ?

[qinwf]

Yes, it is imported in the root page.

Here is the online example. The swiper works on small screens like iPhone but not on wide screens.

https://wonderful-ramanujan-22efd5.netlify.com/

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import 'kbone-ui/lib/weui/weui.css'

import Vue from 'vue'

export default Vue.extend({
  name: 'App',
})
</script>