Swiper双向轮播

<!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 rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->

    <style>

    html, body {

        position: relative;

        height: %;

    }

    body {

        background: #;

        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        font-size: 14px;

        color:#;

        margin: ;

        padding: ;

    }

    .swiper-container {

        width: %;

        height: 300px;

        margin-left: auto;

        margin-right: auto;

    }

    .swiper-slide {

        background-size: cover;

        background-position: center;

    }

    .gallery-top {

        height: %;

        width: %;

    }

    .gallery-thumbs {

        height: %;

        box-sizing: border-box;

        padding: 10px ;

    }

    .gallery-thumbs .swiper-slide {

        width: %;

        height: %;

        opacity: 0.4;

    }

    .gallery-thumbs .swiper-slide-active {

        opacity: ;

    }

    </style>

</head>

<body>

    <!-- Swiper -->
　　//第一个轮播

    <div class="swiper-container gallery-top">

        <div class="swiper-wrapper">

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>

        </div>

        <!-- Add Arrows -->

        <div class="swiper-button-next swiper-button-white"></div>

        <div class="swiper-button-prev swiper-button-white"></div>

    </div>
　　//第二个轮播

    <div class="swiper-container gallery-thumbs">

        <div class="swiper-wrapper">

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>

            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>

        </div>

    </div>

    <!-- Swiper JS -->

    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->

    <script>

    var galleryTop = new Swiper('.gallery-top', {

        nextButton: '.swiper-button-next',

        prevButton: '.swiper-button-prev',

        spaceBetween: ,

    });

    var galleryThumbs = new Swiper('.gallery-thumbs', {

        spaceBetween: ,

        centeredSlides: true,

        slidesPerView: 'auto',

        touchRatio: 0.2,

        slideToClickedSlide: true

    });

    galleryTop.params.control = galleryThumbs;

    galleryThumbs.params.control = galleryTop;

    </script>

</body>

</html>

Swiper双向轮播的更多相关文章

微信小程序之 Swiper（轮播图）
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图配置*/ imgUrls: [ 'http://im ...
七、Vue组件库：Element、Swiper（轮播专用组件）
一.vue的Element组件库官网:https://element.eleme.cn/#/zh-CN 1.1安装推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...
(网页)swiper.js轮播图插件
Swiper4.x使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html&g ...
swiper轮播 swiper整屏轮播
近期坐了几个移动端整屏轮播的效果之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽使用方法示例 <div class="swiper-cont ...
跳坑小程序swiper组件轮播图片右边空白问题
swiper 组件设置轮播图片时,右侧会出现空白的情况:是因为 swiper组件有默认的高度和宽度,所以我们在设置图片高度和宽度的同时, 也要为设置高度和宽度,和高度和宽度样式一样的就可以.
Swiper插件轮播
<html><head> <meta charset="utf-8"> <title>Swiper轮播</title>& ...
Swiper实现轮播图效果
为了实现轮播图(carousel)效果或左右滑动显示不同的内容,我们采用Swiper来实现. 需要引入swiper.min.css和swiper.min.js,文件可从https://github.c ...
vue中异步请求渲染问题（swiper不轮播）（在开发过程中遇到过什么问题、踩过的坑）
问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...
Flutter Swiper制作轮播效果
1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter_swiper的GitHub地址:https: ...

随机推荐

[llvm] LLVM 核心类简明示例 : llvm::Value && llvm::Type && llvm::Constant
LLVM 核心类简明示例 : llvm::Value && llvm::Type && llvm::Constant llvm核心类位于 include/llvm/IR ...
【解决】Linux Tomcat启动慢--Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [236,325] milliseconds
一.背景今天部署项目到tomcat,执行./startup.sh命令之后,访问项目迟迟加载不出来,查看日志又没报错(其实是我粗心了,当时tomcat日志还没打印完),一开始怀疑是阿里云主机出现问题, ...
P4294 [WC2008]游览计划
传送门斯坦纳树给一个联通图,求 $k$ 个关键点联通的最小生成树权值设 $f[o][i]$ 表示当前关键点选择状态为 $o$ ,以点 $i$ 为根的树的最小权值初始 $f[1<<( ...
HDU6464 (权值线段树)-（查找区间第k1小于第k2小之间的和）
http://acm.hdu.edu.cn/showproblem.php?pid=6464 不理解先看博客:https://blog.csdn.net/g21glf/article/details/ ...
ZQUOJ 22854 (优先队列+剪枝）
题目:给出K , N , M : N为顶点数 , M为边数 : 求K个从1到N的不重复的最短边 , 可以来回的走: 分析:很自然的就可以想到用个优先队列广收下K次终点嘛 , 但是.0.0 爆了 ...
C#.net 设置Access-Control-Allow-Origin来实现跨域
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
Flutter FormatException: Bad UTF-8 encoding 0xc3 (at offset 172)
是文件编码问题. 1,打开 Android Studio 进入设置界面 Ctrl + Alt + S 或 File --> Settings 打开如下界面: 2,将 Project Encode ...
jmeter发送邮件的模板
<hr/> (本邮件是程序自动下发的,请勿回复!)<br/><hr/> 项目名称:$PROJECT_NAME<br/><hr/> 构建编号: ...
笔记_JSON
解析 JSON 步骤如果没有自带 , 就添加第三方包 (JavaScript编程语言本身自带解析JSON的能力) 一般是要手写 : 实体类 JSON -> 实体类中间映射 Gson的话 ...
Django_Xadmin 修改后台
admin组件使用 Django 提供了基于 web页面的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTA ...

Swiper双向轮播

Swiper双向轮播的更多相关文章

随机推荐

热门专题