<!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. Security Access Control Strategy && Method And Technology Research - 安全访问控制策略及其方法技术研究

    1. 访问控制基本概念 访问控制是网络安全防范和客户端安全防御的重要基础策略,它的主要任务是保证资源不被非法使用.保证网络/客户端安全最重要的核心策略之一. 访问控制包括 入网访问控制 网络权限控制 ...

  2. VC串口通讯，WriteFile或ReadFile没有任何返回？？

    别犯低级错误,一定要设置读写超时!!!

  3. 一、openfeign的自动配置

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 openfeign是一种声明式的webservice客户端调用框架.你只需要声明接口和一 ...

  4. vue实现一个评论列表

    <!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...

  5. deploy KBA 2167993

    The default trace shows the following error: ****************************************** Unable to cr ...

  6. mysql日期模糊查找的方法

    Mysql模糊查询有以下三种方法: 1.Convert转成日期时间型,在用Like查询.select * from table1 where convert(date,DATETIME) like ' ...

  7. 使用abapGit在ABAP On-Premises系统和SAP云平台ABAP环境之间进行代码传输

    SAP ABAP顾问朋友们,应该都使用过SAPLink这个工具.如果两个ABAP Netweaver系统没有建立起传输路径时,我们无法使用标准的SE10事务码创建传输请求的方式进行这两个系统间的代码传 ...

  8. 软件自带依赖库还是共享对象库/为什么linux发行版之间不能有一个统一的二进制软件包标准

    接前文:Linux软件包(源码包和二进制包)及其区别和特点 在前文,我们知道了linux软件包分为源码包和二进制包两种方式,而不同的发行版之间又有着自己的二进制打包格式. 首先,软件运行依赖着各种各样 ...

  9. k8s中的网络（较详细汇总）

    目录 一.网络前提条件-网络模型 二.需要解决的网络问题 1.容器和容器之间的网络 2.pod与pod之间的网络 同一台node节点上pod和pod通信 不同node节点上pod和pod通信 3.po ...

  10. 戴尔 R730 服务器装 server 2016。

    服务器里面原装系统是 centos 7 ,服务器快递过来时 我没用root账号,(主要是主管忘了这台服务器用户名密码了). 需要用的系统是 server 2016 我这边就按正常的装机流程装机. 1, ...