Vue+Bootstrap设置轮播触摸滑动

最新推荐文章于 2024-01-06 21:10:43 发布

pana hema

最新推荐文章于 2024-01-06 21:10:43 发布

阅读量1.2k

点赞数 1

分类专栏：遇到的问题

本文链接：https://blog.youkuaiyun.com/chen_rui_heng_525/article/details/112579657

版权

本文介绍了如何在Vue项目中使用Bootstrap轮播组件，并解决在移动端触摸无法滑动的问题。通过添加触摸事件，使得移动端用户可以通过滑动手指来切换轮播图片。内容包括轮播代码示例和移动端touch事件的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用bootstrap的轮播

我最近写vue项目用到了bootstrap框架,其中轮播图我用的是bootstrap自带的轮播。但是变成手机端时，触摸无法滑动轮播图片，所以我在网上找了其他人的博客来解决这个问题，我的代码就是结合他们的博客写的，他们博客地址在下面：

移动端touch事件—利用bootstrap实现轮播图手指左右滑动事件
 Vue 获取鼠标位置坐标

为了记录知识点而写的博客笔记：）（代码是借鉴上面两位的博客写的，不是原创不是原创）

轮播代码（不能触摸滑动）

<div class="banner   col-sm-12 col-md-12 col-lg-12">
          <div id="carouselExampleIndicators" class=" carousel slide " data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to=

最低0.47元/天解锁文章