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

随机推荐

nodejs post 数据到php $_POST["content"]接收不到的问题
今天写了一段代码,要用到ajax调用php的接口,因为是https的,所以ajax不能跨域,于是使用nodejs调用接口,但是传输数据后 $_POST["content"]接收不到 ...
把display 属性改为block样式变化问题
可能的值值描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...
TX2 默认root用户启动
Jetpack3.1 修改方式修改1 gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 修改后: 修改2 gedit /root/.pro ...
DHCP协议及基本实现原理
DHCP(Dynamic Host Configuration Protocol):动态主机配置协议. DHCP的优缺点 DHCP服务优点:网络管理员可以验证IP地址和其它配置参数,而不用去检查每个主 ...
POJ_2492 A Bug's Life 【并查集】
一.题面 POJ2492 二.分析并查集判断类别的题目感觉套路都差不多. 还是先判断在不在一个集合里,在一个集合里才能判断是否同类. 若不在一个集合里则需要将这两个点联系起来. 关于联系起来后关系的 ...
O（1）乘法与快速乘O（log）
//O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){ x=x%MOD,y=y%MOD; return ((x*y-(LL)(((long double)x* ...
vue-awesome-swiper 的使用
1.确保 package.json文件中有 "vue-awesome-swiper": "^3.1.3",没有的话install下 2.在main.js配置 ...
UESTC - 1724 GCD区间求和
依然是神奇的欧拉函数若GCD(n,i)=k 则GCD(n/k,i/k)=1, 令i/k=x,有GCD(n/k,x)=1, →k*GCD(n/k,x)=1中x的个数 = GCD(n,i)=k的和范围 ...
webgoat环境搭建
链接: https://pan.baidu.com/s/1gfEKIyB 密码: 5zdq 1:配置Java环境变量,过程请找度娘 2:解压下载好的tomcat 3:将webgoat-containe ...
android 无线调试 [无需数据线][无需root]
无线调试首要条件在同一网段,打开开发者模式 1,打开 5555 端口使用数据线链接手机,在命令窗口执行:adb tcpip 5555 2,adb 链接手机调试这时无需数据线了,在命令窗口执行:ad ...

Swiper双向轮播

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

随机推荐

热门专题