遇到这样的情况,一共5张slide,但是从第三个起再往右划就不动了。后来发现是已经初始化swiper后又追加了slide。(大概意思是这样。太久的程序了,也不想仔细捋了)

暂且用到的办法:

先定义好:

var ifInitSwiper = false; var mySwiper;

在获取数据后:

if($(".swiper-container").length>0){
  if(!ifInitSwiper){
    ifInitSwiper = true;
    mySwiper = new Swiper('.swiper-container', { //内部切换
      direction: 'horizontal', //水平显示
      updateOnImagesReady: true,
      // 如果需要分页器
      pagination: '.swiper-pagination', //分页
    })
   }else{
    mySwiper.update();
   }

}

swiper滑动异常的更多相关文章

  1. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  2. swiper滑动失效问题

    最近在写移动端的项目,页面有用的是swiper滑动的. 但是会发现在滑动时,不灵活,就是滑动时隐藏的数据会显示,但是不滑动数据又在初始那,隐藏的数据还是看不到. 于是各种排除问题,终于在pc端+移动端 ...

  3. Swiper滑动Html5手机浏览器自适应

    手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度. window.onload=function(){ var swiper = d ...

  4. Swiper 滑动

    1.http://www.swiper.com.cn/download/  下载Swiper.JS  Swiper.CSS 2.引入项目,添加html <div class="cont ...

  5. swiper 滑动插件,小屏单个显示滑动,大屏全部显示

    var currSwiperIndex=0; function widthHandle(){ var level = widthLevel(); if(level==1){ //单个显示,滑动 if( ...

  6. Swiper 滑动切换图片(可用于PC端,移动端)

    作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧: 头皮发麻,不喜欢说废话,我更喜欢直接看到效果: 按Swiper官方文档来说, ...

  7. viewpager 无网络的时候滑动异常

    不知道大家有没有遇到过这种情况,就是框架是viewpager+fragment的架构.然后呢,fragment里面是webview.一般情况下,当没有网的时候,webviwe会说什么找不到网页,然后很 ...

  8. swiper 滑动获取当前第几页下标

  9. swiper、fullPage、hammer几种滑动插件对比

    1.使用hammer,自己实现滑动垂直切换页面 <!DOCTYPE html> <html lang="en"> <head> <titl ...

  10. swiper 实现滑动解锁

    最近项目中有这样一个需求,研究了两种写法一个原生,一个使用框架 原生写法: <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. ORM执行sql语句 双下划线 外键字段创建 ORM跨表查询

    目录 模型层之ORM执行SQL语句 方式1一 方式二 方式三 神奇的双下划线查询 ORM外键字段的创建 1.创建基础表 2.确定外键关系 3.表的查看 数据的录入 外键字段相关操作 针对一对多 ''' ...

  2. vulnhub靶场之HACKABLE: III

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Hackable: III,下载地址:https://download.vulnhub.com/hackable/hackable3.ova,下 ...

  3. Python实验报告(第8章)

    实验8:模块 一.实验目的和要求 1.了解模块的内容: 2.掌握模块的创建和导入方式: 3.了解包结构的创建和使用. 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 1.实 ...

  4. 一步步教你在Edge浏览器上安装网风笔记

    微软于2022年6月15日正式结束对浏览器"Internet Explorer (IE)"的支持,IE已正式退出历史舞台,取而代之的是目前风头正盛的被微软称为当今最好用的Edge浏 ...

  5. 能将三次握手讲到这个程度,不给你offer给谁!

    摘要:在后端相关岗位的入职面试中,三次握手的出场频率非常的高,甚至说它是必考题也不为过. 本文分享自华为云社区<能将三次握手理解到这个深度,面试官拍案叫绝~>,作者:龙哥手记. 在后端相关 ...

  6. Linux中的infuxdb安装及数据迁移

    一.安装influxdb 1.更新yum源 cat <<EOF | sudo tee /etc/yum.repos.d/influxdb.repo   [influxdb]   baseu ...

  7. 优化if...else...语句

    写代码的时候经常遇到这样的场景:根据某个字段值来进行不同的逻辑处理.例如,不同的会员等级在购物时有不同的折扣力度.如果会员的等级很多,那么代码中与之相关的if...elseif...else...会特 ...

  8. DVWA靶场实战(十)——XSS(DOM)

    DVWA靶场实战(十) 五.XSS(DOM): 1.漏洞原理: XSS全称为Cross Site Scripting,由于和层叠样式表(Cascading Style Sheets,CSS)重名,所以 ...

  9. render到底是什么,该如何使用它

    一.前言 1.vue程序的运行过程:模板 -> 进行编译 -> 生成ast树 -> 数据绑定 -> 生成render函数 -> 成虚拟dom树 -> 真实dom树 ...

  10. Cpp 友元简述

    友元函数,友元类 使用友元,主要是易于直接访问数据,但友元本质是以破坏封装性为代价. 下例引用于: <C++程序设计(第2版)> 友元声明位置由程序设计者决定,且不受类中public.pr ...