Flicking单图轮播无法拖动的问题

Demos | Flicking

问题描述：当使用Flicking组件的此效果时，中间展示占满div的图片，则会发现鼠标放在滑动滑不过去。

原因：pointer-events：指针事件；默认情况下鼠标在图片上拖动是会出现一个小的图片缩略图随着鼠标在移动。因此需要禁用此效果。

解决：pointer-events: none; 【给img添加这个样式即可！！！】

实现效果

1. 拖动图片可以切换

2. 底部item可以显示当前页

3. 底部item可以点击快速切换

完整demo

<script setup>
import {ref, reactive} from 'vue'
import {useFlickingReactiveAPI} from "@egjs/vue3-flicking";
import {AutoPlay} from '@egjs/flicking-plugins'const flickingRefBox8 = ref(null)
const { indexProgress, currentPanelIndex, moveTo } = useFlickingReactiveAPI(flickingRefBox8)const flickingPluginsBox8 = reactive([new AutoPlay({duration: 2000, direction: 'NEXT', stopOnHover: true}),
])const box8ImgList = reactive([{id: 1,url: 'https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&fmt=auto&app=138&f=JPEG?w=779&h=500',},{id: 2,url: 'https://img0.baidu.com/it/u=1370343071,58099973&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',},{id: 3,url: 'https://img1.baidu.com/it/u=976906684,1007114537&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',},
])const getSlideOverStyleBox8 = (index) => {const length = box8ImgList.lengthconst childProgress = (index - indexProgress.value + length * 1.5) % length - length * 0.5const pos = childProgress < 0 ? `${-childProgress * 100}%` : "0px"const scale = childProgress < 0 ? Math.max(0, 1 - Math.abs(childProgress)) : 1return {width: "100%",transform: `translate(${pos}) scale(${scale})`}
}const showBox8ImgDetail = (img) => {console.log(img, "img")
}
<script><template><div class="home-box8"><Flickingref="flickingRefBox8":options="{ align: 'prev', gap: 20, circular: true }":plugins="flickingPluginsBox8"><divv-for="img in box8ImgList":key="img.id"class="home-box8-img":style="getSlideOverStyleBox8(img - 1)"@click="showBox8ImgDetail(img)"><img :src="img.url" alt="" /></div></Flicking><div class="home-box8-list"><divv-for="(item, i) in box8ImgList":key="item.id":class="['home-box8-list-item',i === currentPanelIndex ? 'home-box8-list-item-active' : '',]"@click="moveTo(i)"></div></div></div>
</template><style lang="scss">.home-box8 {margin: base.changePx(100) base.changePx(150);&-img {width: 100%;height: base.changePx(720);img {width: 100%;height: 100%;object-fit: cover;pointer-events: none;}}&-list {width: 100%;margin-top: base.changePx(80);height: base.changePx(16);display: flex;justify-content: flex-end;gap: base.changePx(26);&-item {width: base.changePx(123);height: 100%;background-color: base.$gary19;color: red;text-align: center;font-size: base.changePx(30);line-height: 100%;cursor: pointer;&-active {background-color: base.$blue4;color: green;}}}}<style>