问答

swiper插件,如何解决鼠标滚轮控制不完整显示?

作者:admin 2021-08-20 我要评论

现在有三张echarts的图,通过swiper轮播,使用鼠标滚轮控制,但是只能滚动两张图 div class="swiper-container" div class="swiper-wrapper" div class="swiper-...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

现在有三张echarts的图,通过swiper轮播,使用鼠标滚轮控制,但是只能滚动两张图

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="dbidc-ip-info">
                <div class="item-title">
                    <span>IP分配</span>
                    <span></span>
                </div>
                <div id="ip-data-bdidc" style="width: 512px;height:190px;"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="dbidc-rack-info">
                <div class="item-title">
                    <span>机架分配</span>
                    <span></span>
                </div>
                <div id="rack-data-bdidc" style="width: 512px;height:190px;"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="dbidc-user-info">
                <div class="item-title">
                    <span>用户分配</span>
                    <span></span>
                </div>
                <div id="user-data-bdidc" style="width: 512px;height:190px;"></div>
            </div>
        </div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
     $(function () {
        var swiper = new Swiper('.swiper-container', {
            //pagination: {
            //    el: '.swiper-pagination',
            //    dynamicBullets: true,
            //},
            mousewheel: true,
            observer:true,//修改swiper自己或子元素时,自动初始化swiper
            observeParents:true//修改swiper的父元素时,自动初始化swiper
        });
    });
###

你是Swiper5 版本吧,回退到swiper4.4.2 版本就行了,应该是新版本迁移有个状态没有清理

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器