精华内容
下载资源
问答
  • swiper

    2020-10-14 09:16:40
    // 获取package下swiper.min.js swiper.min.css 引入js css <link rel="stylesheet" href="css/swiper.min.css"> <script src="js/swiper.min.js"></script> 查看官方示例 新窗口打开 // 查看...

    swiper(https://www.swiper.com.cn/

    // 下载官方压缩包
    // 获取package下swiper.min.js swiper.min.css
    

    引入js css

    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    

    查看官方示例 新窗口打开

    // 查看网页源代码
    
    // 复制相关 js css html代码
    .swiper-container {
       width: 100%;
       height: 100%;
    }
      
    .swiper-slide {
       text-align: center;
       font-size: 18px;
       background: #fff;
       ...
    }
    
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        ...
      </div>
    </div>
    
    <script> 
        var swiper = new Swiper('.swiper-container', { 
        ...
        }); 
    </script>
    
    // 按需定制相关参数
    // 可参考示例源代码
    
    // 同页面不同swiper 元素定义不同类名实例化
    (function () {
        var swiper = new Swiper('.swiper-container1', {
            slidesPerView: 2,
            spaceBetween: 30
        },
      });
    })();
        (function () {
          var swiper = new Swiper('.swiper-container2', {
          slidesPerView: 2.2,
          spaceBetween: 20
        });
    })()
    

    附件

    展开全文
  • 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启用了节点模块,因为它使用Dom7ssr-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 插件

    2016-07-26 08:37:20
    Swiper
    Swiper
    
    展开全文
  • 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 实例

    2016-01-14 15:08:57
    swiper 实例,H5 + swiper实现滑动切换
  • flutter 轮播组件 Swiper

    万次阅读 多人点赞 2018-09-19 19:18:54
    flutter_swiper flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 先放上github上的几张图看一下效果。 ✨✨ 新功能 更多 截图 图就先放到这里,我们看一下用法。 安装 ...
  • 2个swiper 相关联 swiper1和swiper2 点击swiper1的上一题和下一题,就让swiper2显示对应的盒子,上下盒子一起动 两个swiper模板 调用两个模板并给data值 模板方法 初始化swiper1 点击上一题或下一题获取到...
  • swiper不回弹。swiper无限拉 https://blog.csdn.net/qq_36413371/article/details/104030854
  • 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”文件夹...
  • npm install vue-awesome-swiper --save安装了swiper插件 为什么根据官网的操作无法获取这个路径 ![图片说明](https://img-ask.csdn.net/upload/202006/03/1591172542_26353.jpg) ![图片说明]...
  • Swiper踩坑

    2020-04-19 17:26:43
    swiper踩坑之路一、swiper简单使用指南二、网格分布三、遇到的问题 一、swiper简单使用指南 1、安装swiper依赖包 npm i swiper 2、引入swiper import Swiper from 'swiper'; import 'swiper/css/swiper.css' 3、...
  • Swiper 使用方法1.首先加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件,不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。.........2.HTML内容。Slide 1Slide 2Slide ...
  • vue swiper

    2020-09-02 13:21:02
    https://github.surmon.me/vue-awesome-swiper/ 1、安装 ... import vueSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(vueSwiper) 3、进入轮播图组件中 <.
  • 关于swiper

    2019-11-05 22:13:57
    最近写轮播的时候,遇到了swiper 然后就自己使劲捉摸了一番 首先Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。 如果要使用swiper,首先要导入两个文件:swiper.min.css和swiper.min.js 这...
  • swiper组件

    2020-07-24 11:25:59
    如果轮播效果有需求,可以使用swiper组件,修改对应样式 如何使用swiper组件查看swiper官方文档即可 swiper轮播组件的自动播放属性 autoplay: { //自动播放 delay: 1500, //1.5s stopOnLastSlide: false, ...
  • Swiper配置

    2020-03-06 11:01:37
    首先附上 Swiper 的中文网 前言 swiper是网页设计师必备的一项技能,它的使用频率仅次于jquery,国内大型企业包括 bat 都在使用。并且掌握好swiper也会让你在职场中游刃有余。 swiper的学习特别简单,通过你简单的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,233
精华内容 5,293
关键字:

swiper