Vue picture swipe left and right to switch

recently, there is a business need to click on the preview of a picture in a vue project. You can swipe around to switch the picture, similar to the nine palace thumbnails, click to enlarge, and slide around to the effect of the next picture. At present, you can manually click on the icon to switch, but the sliding switch has not been realized. Ask the boss for advice!

<div 
                class="img-box img-two" 
                v-if="listData.activityImageList.length 
                      && listData.activityImageList.length>=2 
                      && listData.activityImageList.length<4">
                <div>
                  <img 
                    :src="`${API}/image/activity/${listData.activityImageList[0].thumbnailName}`"
                    v-preview="`${API}/image/activity/${listData.activityImageList[0].imageName}`" 
                    preview-title-enable="true"
                    preview-nav-enable="true"/>
                </div>
                <div>
                  <img 
                    :src="`${API}/image/activity/${listData.activityImageList[1].thumbnailName}`"
                    v-preview="`${API}/image/activity/${listData.activityImageList[1].imageName}`" 
                    preview-title-enable="true"
                    preview-nav-enable="true"/>
                </div>
              </div>

what is used here is the vue-pcture-preview component of vue, but you can only click the icon to switch pictures, not slide to switch icons. Do you have a boss to share your experience? I have considered vue-preview, but will not!

clipboard.png

Jan.18,2022

slide touchstart and touchmove , touchend and touchcancel .

Menu