swiper

时间：2021-06-16 03:05:59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link href="http://cdn.bootcss.com/Swiper/3.4.1/css/swiper.css" rel="stylesheet">

    <!-- Demo styles -->
    <style>
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 300px;
            margin: 20px auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
        }
    </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
    </div>
</div>
<div id="bless">
    <input id="bless-word" type="text">
    <a id="share-button">立即分享</a>
</div>

<!-- Swiper JS -->
<script src="http://cdn.bootcss.com/Swiper/3.4.1/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
    });
    var shareBtn = document.getElementById("share-button");
    var bless = document.getElementById("bless-word");

    shareBtn.addEventListener("click",function(){
        var blessWord = bless.value;
        var url = "index2.html?word=" + blessWord;
        shareBtn.setAttribute("href",url);
    },false);
</script>
</body>
</html>

swiper的更多相关文章

  1. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  2. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  3. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  4. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  5. swiper框架，实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  6. swiper&period;animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... &lt ...

  7. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. swiper横向轮播（兼容IE8）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Swiper说明&amp&semi;&amp&semi;API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  10. Swiper 中文API手册（share）

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

随机推荐

  1. I&period;MX6 console 跳过 login

    /*************************************************************************** * I.MX6 console 跳过 logi ...

  2. 重拾qt

    最近公司又接了一个煤矿的项目,要写个小程序摘取数据,我是公司唯一c++程序员,本来搞ios搞好好的,现在又得重拾半年没摸得qt了.呵呵...呵呵呵. 这里只记录这次小程序的一些小的总结吧.. 1.中文 ...

  3. 再谈Android应用瘦身

    Android应用apk安装包的大小,虽然对于现在WiFi普及情况而言消耗流量已经微乎其微,但是,对于一款好的应用,对于一款负责任的应用,当然是越小越好了. 引言: .应用越小,下载越快,也就意味着新 ...

  4. cocos2dx&plus;lua编译Android项目

    一.简单介绍 cocos2dx版本号:3.2 二.问题及解决方式 1.为项目开启Native支持,把项目转为C++项目. 1>.项目开启C++ Native支持,操作例如以下图 watermar ...

  5. Express 3&period;0新手指南入门教程

    在确认已经安装了node之后(下载), 在你的机器上创建一个目录,让我们来开始你的第一个应用程序吧 $ mkdir hello-world 在这个目录中你首先得定义一下你的应用程序“包”文件,它和其它 ...

  6. Play-With-Docker在chrome上的插件

    一键使用PWD 在chrome扩展中,找到"Play With Docker"插件,并安装在chrome浏览器中 进入hub.docker.com网站,搜索熟悉的docker镜像. ...

  7. Oracle ADG搭建

    Oracle Active Data Guard搭建 一:安装 1.基础环境配置 1.1.开启强制日志记录 DG日志发送方式中ARCH进程和LGWR进程的ASYNC模式都是基于日志同步的,所以我们必须 ...

  8. Python中if &lowbar;&lowbar;name&lowbar;&lowbar; &equals;&equals; &quot&semi;&lowbar;&lowbar;main&lowbar;&lowbar;&quot&semi;&colon; 的理解

    1.在很多python脚本中在最后的部分会执行一个判断语句if __name__ == "__main__:",之后还可能会有一些执行语句.那添加这个判断的目的何在? 在pytho ...

  9. es6 语法 （symbol）

    { // 声明 let a1 = Symbol(); let a2 = Symbol(); console.log(a1 === a2); //false let a3 = Symbol.for('a ...

  10. 为什么要用 Node&period;js

    每日一篇优秀博文 2017年10月10日 周二 为什么要用 Node.js 这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正. Node.js 是什么 传统意义上 ...

相关文章