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

随机推荐

高版本sketch文件转成低版本的sketch
https://pan.baidu.com/s/1htmNERU 下载该文件然后在放到高版本sketch文件的目录下,执行下面命令 chmod +x ./build.sh ./build.sh 文件 ...
String Reduction问题分析
问题描述: Given a string consisting of a,b and c's, we can perform the following operation: Take any two ...
python 连接数据库 pymysql模块的使用
一 Python3连接MySQL 本文介绍Python3连接MySQL的第三方库--PyMySQL的基本使用. 1 PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MyS ...
1076 Wifi密码（15 分)
// 思路是网上以一位大神的,特简单直接采用字符串,判断长度,还有最后一个元素是否T,便可通过ASCll输出数字:#include <iostream> #include <stri ...
小Q系列故事——最佳裁判
Time Limit:200MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description 过去的2012年 ...
C++_基础1-基本数据类型
面向对象(OOP)的本质是设计并扩展自己的数据类型.设计自己的数据类型就是让类型与数据匹配. 如果正确做到这一点,就会发现以后使用数据会容易很多.然而创建自己的类型之前,必须了解并理解C++内置类型. ...
ZOJ - 2401 水DP
最近会多做点巩固基础的题目 #include<iostream> #include<algorithm> #include<cstdio> #include< ...
Bubble Sort Graph CodeForces - 340D || 最长不下降/上升子序列
Bubble Sort Graph CodeForces - 340D 题意: 给出一个n个数的数列,建一个只有n个结点没有边的无向图,对数列进行冒泡排序,每交换一对位置在(i,j)的数在点i和点j间 ...
UVa 253
UVa 253 #include <iostream> #include <cstdio> #include <string> #include <cstri ...
使用electron构建跨平台Node.js桌面应用经验分享
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6154 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随 ...

Swiper双向轮播

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

随机推荐

热门专题