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

随机推荐

TX2 Clone
由于给TX2配置了很多的开发环境,也修改了一些驱动,想将这些环境能够完整的迁移到一块bare TX2,于是尝试了clone的方法. 这种方法的优点是: 确保了移植的TX2 与已经配置好的环境是一致的: ...
Qt 学习之路 2（39）：遍历容器
Qt 学习之路 2(39):遍历容器豆子 2013年1月16日 Qt 学习之路 2 29条评论上一节我们大致了解了有关存储容器的相关内容.对于所有的容器,最常用的操作就是遍历.本章我们将详细了解有 ...
docker大概理解
#是啥# 轻量级的虚拟机,占用资源远小于一般意义上的虚拟机(例如:vmware,hyper-v) #特点# 启动快,体积小,开销少 #本质# Linux容器的一种封装参考: 阮一峰博客 http:/ ...
HDU - 1520 树形DP入门题
写了两种DP,第一种是按照自己习惯来xjb敲的,第二种参考别人熟悉一下树形DP的套路 dp[i][]是维护i及以下的关系最优值的,所以我觉得两次DP记忆搜索之间不清-1应该是正确的(也就做了一次加法 ...
python练习六十九：urllib爬取练习
爬取图片,将链接中的图片取出来,并统计一共下载了多少图片代码: def fetch_pictures(url): headers = {'User-Agent':'Mozilla/5.0 (Wind ...
TT 安装之 LINUX
# useradd ttadmin -- 创建用户 # groupadd ttadmin -- 创建用户组 # mkdir /etc/TimesTen -- 创建目录 # chgrp -R ttadm ...
GreenPlum 大数据平台--并行备份(四)
01,并行备份(gp_dump) 1) GP同时备份Master和所有活动的Segment实例 2) 备份消耗的时间与系统中实例的数量没有关系 3) 在Master主机上备份所有DDL文件和GP相关的 ...
ButtonAddListener监听按钮点击事件
ButtonAddListener监听按钮点击事件 using UnityEngine; using System.Collections; using UnityEngine.UI; using U ...
cloudermanager安装过程中出现W:GPG error错误 http://ppa.launchpad.net.trusty Release **** 4DF9B28CA252A784（图文详解）
不多说,直接上干货! 问题详情解决办法 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 4DF9B28CA252A784 ...
手指静脉细化算法过程原理解析　以及python实现细化算法
原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/8672489.html 文中的一些图片以及思想很多都是参考https://www.cnblogs ...

Swiper双向轮播

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

随机推荐

热门专题