<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

    <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

    <style>

        html, body {

        }

        body {

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

            font-size: 14px;

            margin: 0;

            padding: 0;

        }

        .swiper-container {

            width: 100%;

            margin-left: auto;

            margin-right: auto;

        }

        .gallery-top {

            height:auto;

            width: 100%;

        }

        .gallery-top .sweiper_content{

            background:#000000;

            text-align: center;

            color:#ffffff;

            height:300px;

        }

        .gallery-thumbs {

            height:100px;

            box-sizing: border-box;

            padding: 10px 0;

        }

        .gallery-thumbs .swiper-slide {

            width: 50%;

            height: 100%;

        }

        .gallery-thumbs .swiper_tab{

            color:#000000;

            text-align: center;

            height:100px;

            line-height:100px;

        }

        .gallery-thumbs .swiper-slide-thumb-active {

            color:#ffffff;

            border-top-left-radius:20px;

            border-top-right-radius: 20px;

            background:#000000;

        }

      </style>

</head>

<body>

    <!-- 导航 -->

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

        <div class="swiper-wrapper">

            <div class="swiper-slide swiper_tab">注册</div>

            <div class="swiper-slide swiper_tab">已注册</div>

        </div>

    </div>

    <!-- Swiper -->

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

    <div class="swiper-wrapper">

      <div class="swiper-slide sweiper_content">1111111111111111111</div>

      <div class="swiper-slide sweiper_content">222222222222222222</div>

    </div>

    <!-- Add Arrows -->

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

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

  </div>

  <!-- Initialize Swiper -->

  <script>

    //导航

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

      spaceBetween: 10,

      slidesPerView: 2,

      freeMode: true,

      watchSlidesVisibility: true,

      watchSlidesProgress: true,

    });

    // 内容

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

      spaceBetween: 10,

    //   navigation: {

    //     nextEl: '.swiper-button-next',

    //     prevEl: '.swiper-button-prev',

    //   },

      thumbs: {

        swiper: galleryThumbs

      }

    });

  </script>

</body>

</html>

。。。

sweiper做一个tab切换的更多相关文章

  1. ConstraintLayout+radioGroup做一个tab.简单好用。

    主页tab是必须会有的,各种实现也很多.各有千秋.但目标都是简单.可控.今天用ConstraintLayout+radioGroup做一个tab.简单性可控性都还可以.本文目的把ConstraintL ...

  2. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换

    一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. 小程序的一个tab切换

    <view class="tab-left" bindtap="tab"> <view class="{{tabArr.curHdI ...

  4. 用bootstrap的tab插件做一个图层切换效果（感觉会误导淫们，大家当乐子看吧）

    小伙伴们啊,我JS真的是个渣渣,所以总想要偷懒,于是为了实现效果就把tab插件给改了(各位大神轻拍啊,我是小白,很纯洁滴,小心脏也很脆弱)…… 最近做的项目为了考虑以后的移动设备兼容性,所以用了Boo ...

  5. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  7. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  8. tab切换中的滚动条下拉分页带来的问题

    相信做过tab切换中滚动条下拉分页的童鞋都知道,我们在用scroll方法来做滚动条下拉分页的时候,都是有bug,切换中间的内容会互相影响,为了解决这个问题,我总结了2种方法: 1.方法一: <! ...

  9. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

随机推荐

  1. 用ajax和PHP实现简单的流程管理

    首先要先有一个新建流程的页面xinjian.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. SD-定义定价用途的条件表(Condition Table)

    https://www.fenginfo.com/815.html 条件表(Condition Table)是SAP条件技术体系中最基础的数据源,它们是一群特定的数据表,表名是以特定字母开头 + 三位 ...

  3. php 图片与base64互转

    header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = '1.png'; $image ...

  4. 【转载】内联函数 —— C 中关键字 inline 用法解析

    转载地址:https://blog.csdn.net/zqixiao_09/article/details/50877383 一.什么是内联函数 在C语言中,如果一些函数被频繁调用,不断地有函数入栈, ...

  5. kvm虚拟机控制台登录配置

    vm虚拟机能否像xen虚拟机一样通过virsh console 一样采用字符界面进行linux虚拟机控制台呢,答案是肯定的,默认情况下该命令是不起作用的,需要修改相关文件才能实现. 本文出自:http ...

  6. JSON【1】

    http://repo1.maven.org/maven2/com/fasterxml/jackson/core/    JSON[jar]包下载 JSON是什么? 是一种轻量级的数据交换格式,完全独 ...

  7. ubuntu 修改环境变量(PATH)

    1.什么是环境变量(PATH) 在Linux中,在执行命令时,系统会按照PATH的设置,去每个PATH定义的路径下搜索执行文件,先搜索到的文件先执行. 我们知道查阅文件属性的指令ls 完整文件名为:/ ...

  8. 【克鲁斯卡尔蒜法-最小生成树算法】-zzuli-2271 -Problem -E-魔法交流活动

    问题 E: 魔法交流活动 题目描述 魔法学校近日开展了主题为“天气晴朗”的魔法交流活动.N名魔法师按阵法站好,之后选取N - 1条魔法链将所有魔法师的魔力连接起来,形成一个魔法阵.魔法链是做法成功与否 ...

  9. 《ABCD组》实验十一 团队作业7：团队项目设计完善&编码

    <ABCD组>实验十一 团队作业7:团队项目设计完善&编码 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在 ...

  10. （一）AppScan的安装及破解

    IBM AppScan是一款目前最好用的Web 应用安全测试工具,Rational AppScan 可自动化 Web 应用的安全漏洞评估工作,能扫描和检测所有常见的 Web 应用安全漏洞,例如 SQL ...