swiper

千次阅读 2018-06-07 11:02:44

Swiper - 是免费且最现代的移动触摸滑块，具有硬件加速转换和惊人的本机行为。它旨在用于移动网站，移动网络应用程序和移动原生/混合应用程序。主要为iOS设计，但也适用于最新的Android，Windows Phone 8和现代桌面...

Swiper - 是免费且最现代的移动触摸滑块，具有硬件加速转换和惊人的本机行为。它旨在用于移动网站，移动网络应用程序和移动原生/混合应用程序。主要为iOS设计，但也适用于最新的Android，Windows Phone 8和现代桌面浏览器
Swiper不兼容所有平台，它是一款现代触控滑块，仅专注于现代应用/平台，带来最佳体验和简单性。
Swiper以及其他优秀组件是Framework7的一部分- 用于构建iOS和Android应用程序的全功能框架。Swiper也是Ionic Framework中的默认滑块组件

Swiper入门
1A。下载并安装Swiper
首先，我们需要下载所需的Swiper文件：
我们可以从Swiper GitHub仓库下载它们
或者我们可以通过鲍尔安装它们，输入终端：$ bower install swiper
或者，使用Atmosphere作为流星包：$ meteor add nolimits4web:swiper
或者，使用NPM$ npm install swiper
在下载/安装的软件包中，我们需要文件dist/夹中的文件。
1B。从CDN使用Swiper
如果你不想在你的项目中包含Swiper文件，你可以使用它从Swiper上cdnjs。以下文件可用：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>

 不要忘记将
 4.xx
 更改为Swiper的实际版本

2.将Swiper文件包含到网站/应用程序中
之后，我们需要将Swiper的CSS和JS文件包含到我们的网站/应用程序中。在你的html文件中：
<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>
3.添加Swiper HTML布局
现在，我们需要将Swiper布局添加到我们的应用中：
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
4. Swiper CSS样式/大小
之后，我们可能需要在CSS文件中设置Swiper大小：
.swiper-container {
    width: 600px;
    height: 300px;
}
5.初始化Swiper
最后，我们需要在JS中初始化Swiper。有几个选项/地方可以做到这一点：
最好的选择将在内联脚本或脚本文件中包含在主体的最后（在结束</body>标记之前）：
<body>
  ...
  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>
</body>
如果你在你的站点中使用jQuery / Zepto，那么你可以在你的任何JS文件中初始化它，但要确保你在document.ready事件中完成它：
  $(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true
    })
  });
否则（但不推荐），你可以在window.onload事件中初始化它：
  window.onload = function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true
    })
  };
作为CommonJs模块
Swiper与CommonJs模块完全兼容，可以在Node.js环境中使用：
var Swiper = require('swiper');

var mySwiper = new Swiper('.swiper-container', { /* ... */ });
作为ES模块
Swiper软件包带有ES模块版本，可以在支持或Webpack或Rollup等捆绑软件的情况下使用：
import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

 如果您将其用作ES模块，请确保：
 您已经启用了巴贝尔或布雷它transpile到ES5语法，
您已经为Swiper启用了节点模块，因为它使用Dom7和ssr-window包作为依赖关系。

Swiper babel-loader和Dom7的Webpack配置示例：
module: {
  rules: [
    {
      test: /\.js$/, // Check for all js files
      exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
      loader: 'babel-loader'
    }
  ]
}

接下来是什么？
如您所见，将Swiper集成到您的网站或应用程序非常简单。所以这是你的下一个步骤：
访问API文档以了解更多关于所有Swiper API以及如何控制它的信息。
看看可用的演示。
如果您有关于Swiper的问题，请随时在我们的论坛中提问。如果你更喜欢StackOverflow，那么别忘了用swiper标签标记你的问题。
如果发现错误，请在GitHub上创建问题。

收起

展开全文

swiper

2017-07-26 22:24:55

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 
 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 
 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 
 Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等。 
 中文官网：http://www.swiper.com.cn/ 
Swiper使用方法 
 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。 
 <link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script> 
初始化一个Swiper： 
 Container： Swiper的容器，里面包括滑动块（slides）的封套（wrapper)、分页器(pagination)、前进按钮等。 
 wrapper ：触控的对象，可触摸区域，移动的块的集合，过渡时会随slide切换产生位移。 
<div class="swiper-container">
  <div class="swiper-wrapper">
    ...
  </div>
</div> 
Swiper Animate使用方法 
 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。 
 <link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
          <link rel="stylesheet" href="css/animate.min.css" />
    <script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
 
制作动漫效果的广告工具扩展：木疙瘩

收起

展开全文

vue中swiper vue-awesome-swiper的使用方法和爬坑大法

万次阅读 多人点赞 2020-07-08 13:33:33

vue中swiper vue-awesome-swiper的使用方法和爬坑大法由版本引起的一系列坑坑1坑2坑3正确的使用姿势：安装（指定版本）组件中使用由版本引起的一系列坑时间：2020.07.08（时间，版本很重要-坑的起源）这两天在vue...



 文章目录
 由版本引起的一系列坑
正确的使用姿势：
安装（指定版本）
组件中使用
  
总结：

 
由版本引起的一系列坑 
时间：2020.07.08（时间，版本很重要-坑的起源） 
这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了）
 按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅
 
 坑1
 按照上图安装方法，npm将安装最新的vue-awesome-swiper（@4），对应的是swiper6，但是国内暂时没有swiper6的文档，意味着没法参考使用方法，有问题也不好去网上找 
坑2
 最新版vue-awesome-swiper的安装姿势是这样子滴： 
npm install swiper vue-awesome-swiper --save
 
对比vue-awesome-swiper版本3 
npm install vue-awesome-swiper --save
 
没有孙猴子的火眼金睛，你很可能忽略swiper（蝴蝶效应，引起后续一系列坑） 
坑3
 划重点：这是网上大伙查找的最多的坑，搞了很久没解决，有可能会导致小伙伴们暴躁易怒，哈哈 
安装完之后，你又在某度上查找使用方法，网友一般建议你这样使用 
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
....
 
然后你的vue就使劲跟你报错，说找不到swiper.css，然后你又继续某度，无限坑。。。
 或者你去看了一下路径，再去node_modules找swiper，发现没有swiper这货。那就安装个swiper呗 
npm install swiper --save
 
但是，你没有带版本，npm默认给你装的是swiper6，文件夹里的路径跟swiper4都不一样啦兄弟们。 
这才是问题的根源，加入你没找到问题的核心，继续某度的话，估计还没好几天辛苦滴爬坑。 
 
正确的使用姿势： 
安装（指定版本） 
npm install vue-awesome-swiper@3 --save-dev
 
组件中使用 
这里我贴出在页面中简单使用方法（先跑起来），小伙伴们可以完全复制粘贴，复杂的东西我都简化掉了。 版本: vue@2.5.2，vue-awesome-swiper@3.1.3 
<template>
  <div class="recommendPage">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
};
</script>
<style scoped >
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 200px;
  background: pink;
}  
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>

 
 
总结： 
不能盲目瞎抄，不注意自己版本和网上方法里版本差异
不要放弃，遇事沉着冷静，顺着vue报错的提示去看看node_modules看下插件包里的路径，可能有用处 
最后，如果帮你脱坑的话，希望小伙伴们打赏一毛钱

收起

展开全文

vue 前端 js html javascript

swiper组件
2018-12-27 10:27:43
最优秀的轮播组件，没有之一。 Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。 Swiper中文网提供Swiper在线演示、Swiper中文教程、Swiper中文APi
收起
轮播图
swiper 实例
2016-01-14 15:08:57
swiper 实例，H5 + swiper实现滑动切换
收起
swiper-5.4.5
2020-12-20 11:36:39
swiper-5.4.5
收起
swiper.zip
2020-06-07 09:50:05
前端最正常见效果，轮播图swiper前端最正常见效果，轮播图swiper前端最正常见效果，轮播图swiper前端最正常见效果，轮播图swiper
收起
swiper插件
2017-01-24 10:03:54
swiper 一款强大的轮播插件支持触摸滑动事件
收起
Swiper示例
2015-12-04 08:22:08
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
收起
mod_ju_swiper_swiper_joomla_源码
2021-10-03 17:41:32
swiper.js module for joomla
收起
Vue使用Swiper
2018-12-13 21:00:02
Vue使用Swiper先用小黑板npm i swiper 然后引入 import Swiper from 'swiper' import '../../node_modules/swiper/dist/css/swiper.min.css'
收起
swiper touch
2015-10-26 09:10:37
swiper touch用于html5开发
收起
前端swiper插件
2019-02-14 18:39:55
前端swiper插件
收起
swiper-tfboys
2019-06-05 18:28:18
swiper tfboys 源码资源 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper...
收起
swiper凸显效果
2020-03-16 15:41:13
swiper凸显效果，中间部分正常显示，其他部分显示为灰色。技术点：DIV+CSS、jQ、swiper。
收起
swiper-repeat:AngularJS 的 Swiper-源码
2021-07-07 15:20:08
AngularJS 的 Swiper swiper-repeat 类似于 angular 的 ng-repeat 指令。它为集合中的每个项目实例化一个模板一次，但与 ng-repeat 不同，它将每个模板实例显示为可滑动的幻灯片。安装用bower安装 bower ...
收起
JavaScript

swiper2 swiper3 swiper4之间的差异

千次阅读 2019-01-30 13:46:37

兼容性： swiper2：pc端（IE7+），部分移动端...所以若pc端要求兼容性较好则使用swiper2（不推荐使用swiper做pc端，推荐使用另一插件superslide），只做移动端使用swiper4 官网介绍：https://www.swiper...

兼容性：

swiper2：pc端（IE7+），部分移动端浏览器

swiper3：pc端（IE10+），部分移动端浏览器

swiper4：移动端浏览器、部分PC端浏览器、IE10+

所以若pc端要求兼容性较好则使用swiper2（不推荐使用swiper做pc端，推荐使用另一插件superslide），只做移动端使用swiper4

官网介绍：https://www.swiper.com.cn/about/us/

收起

展开全文

Swiper DEMO
2015-04-10 08:35:41
Swiper-3.0.6.zip 各种demo集合
收起
Vue Swiper导入swiper.css报错This dependency was not found:swiper/dist/css/swiper.css
千次阅读 多人点赞 2020-07-28 22:58:41
Vue Swiper导入swiper.css错误 Vue使用swiper下 To install it, you can run: npm install --save swiper/dist/css/swiper.css 使用npm下载了：npm install vue-awesome-swiper --save 转到“ node_modules”文件夹...
收起
javascript css vue.js
swiper-animation:在swiper上运行动画的更简单方法-源码
2021-05-17 05:16:53
在swiper上运行动画的更简单方法。（）对于范围内的NPM软件包，已重命名为@ cycjimmy / swiper-animation。安装 # via npm $ npm install @cycjimmy/swiper-animation --save # or via yarn $ yarn add @...
收起
解决vue中使用swiper插件问题及swiper在vue中的用法
2021-01-21 12:09:29
Swiper简介 Swiper常用于移动端网站的内容触摸滑动。 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费...
收起
轮播图swiper
2019-01-09 16:21:55
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。 Swiper提供Swiper在线演示、Swiper中文教程、Swiper中文APi
收起
轮播
swiper基本使用api
2021-03-19 16:31:53
swiper基本使用api
收起
layui的模板引擎与swiper 2个swiper 相关联 swiper1和swiper2 点击
2020-03-31 12:14:00
2个swiper 相关联 swiper1和swiper2 点击swiper1的上一题和下一题，就让swiper2显示对应的盒子，上下盒子一起动两个swiper模板调用两个模板并给data值模板方法初始化swiper1 点击上一题或下一题获取到...
收起
swiper.min
2018-12-01 16:26:16
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
收起

Swiper

Swiper入门

1A。下载并安装Swiper

1B。从CDN使用Swiper

2.将Swiper文件包含到网站/应用程序中

3.添加Swiper HTML布局

4. Swiper CSS样式/大小

5.初始化Swiper

作为CommonJs模块

作为ES模块

接下来是什么？

swiper

vue中swiper vue-awesome-swiper的使用方法和爬坑大法

文章目录

由版本引起的一系列坑

正确的使用姿势：

安装（指定版本）

组件中使用

总结：

swiper组件

swiper 实例

swiper-5.4.5

swiper.zip

swiper插件

Swiper示例

mod_ju_swiper_swiper_joomla_源码

Vue使用Swiper

swiper touch

前端swiper插件

swiper-tfboys

swiper凸显效果

swiper-repeat:AngularJS 的 Swiper-源码

swiper2 swiper3 swiper4之间的差异

Swiper DEMO

Vue Swiper导入swiper.css报错This dependency was not found:swiper/dist/css/swiper.css

swiper-animation:在swiper上运行动画的更简单方法-源码

解决vue中使用swiper插件问题及swiper在vue中的用法

轮播图swiper

swiper基本使用api

layui的模板引擎与swiper 2个swiper 相关联 swiper1和swiper2 点击

swiper.min

swiper