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: ...

随机推荐

最小生成树问题：Kruskal算法 AND Prim算法
Kruskal算法: void Kruskal ( ) { MST = { } ; //边的集合,最初为空集 while( Edge ...
4、numpy+pandas速查手册
<Python数据分析常用手册>一.NumPy和Pandas篇一.常用链接: 1.Python官网:https://www.python.org/2.各种库的whl离线安装包:http: ...
Octave安装符号工具箱
1.国内访问Octave的代码包不稳定,可以访问网址http://sourceforge.mirrorservice.org/o/oc/octave/Octave%20Forge%20Packages ...
C++_IO与文件2-用cout进行输出
C++将输出流看作是字节流,在程序中,很多数据被组织成比字节更大的单位. 例如int类型由16位或者32位的二进制值表示:double值由64位的二进制数据表示: 但是在将字节流发送给屏幕时,希望每个 ...
C++_函数4-函数重载与函数模板
函数重载多个函数,函数名相同,但是调用的时候,参数不同. 函数多态是C++在C语言的基础上新增的功能.多态指的是有多种形式,因此函数多态允许函数可以有多种形式.术语“函数重载”指的是可以有多个同名的 ...
C++_异常9-异常的注意事项
一.先讨论异常被引发后,可能导致的问题意外异常: 如果它是在带异常规范的函数中引发的,则必须与规范列表中的某种异常匹配,否则为意外异常.在默认情况下,这将导致程序异常终止(虽然C++11摒弃了异常规 ...
vue修改组件样式
.el-date-editor /deep/ input{ padding-left:30px; } 改变引入的组件里面元素的样式: 1.去掉css内的scoped,但是这样会污染全局 2.加上/de ...
[转] 用Python建立最简单的web服务器
[From] http://www.cnblogs.com/xuxn/archive/2011/02/14/build-simple-web-server-with-python.html 利用Pyt ...
python time,random，os,sys,序列化模块
一.time模块表示时间的三种方式在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳 ...
centos7升级firefox的flash插件
1. 在https://get.adobe.com/flashplayer/下载文件.选择.tar.gz. 2. 下载的文件名为flash_player_npapi_linux.x86_64.tar. ...

Swiper双向轮播

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

随机推荐

热门专题