<!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. NOI2000 青蛙过河[递推]

    也许更好的阅读体验 \(\mathcal{Description}\) 原题链接: Comet OJ 洛谷 大小各不相同的一队青蛙站在河左岸的石墩(记为A)上,要过到对岸的石墩(记为D)上去.河心有几 ...

  2. Excel VBA 入门基础

    Private Sub RegExp_Replace() Dim RegExp As Object Dim SearchRange As Range, Cell As Range '此处定义正则表达式 ...

  3. 读取经纬度坐标并存储为字典格式，即key为IＤ，value为轨迹点

    示例数据: #格式为txt文本 ID,L,B 001,116.5154,45.1154 001,116.5160,45.1153 ... 002,xxx,xxx ... 目标:建立轨迹数据结构,即di ...

  4. 目标进程已退出，但未引发 CoreCLR 启动事件

    目标进程已退出,但未引发 CoreCLR 启动事件.请确保将目标进程配置为使用 .NET Core.如果目标进程未运行 .NET Core,则发生这种情况并不意外 解决:更新SDK版本

  5. webpack4 + ejs 构建多页应用

    目录结构 ├─build webpack配置目录 │ ├─plugins.js │ ├─rules.js │ ├─transfromAssets.js //简单的一个插件,处理路径问题 │ └─web ...

  6. 【js】字符串反转（倒序）的多种处理方式

    今天发布一篇关于字符串反转的几种方式(一种问题的解决方案不是只有一种). 方式1: 这种方式比较简单,推荐使用 字符串转数组,反转数组,数组转字符串. split(""):根据空字 ...

  7. python程序打包exe

    http://c.biancheng.net/view/2690.html 用inno setup做成安装包(官网上下载) http://www.jrsoftware.org/isdl.php

  8. Linux 之 文件

    文件名称 在linux中,windows概念中的文件夹和文件是没有区别的,都是统称为文件. 1.Linux中文件的名称大小写是敏感的 2.名称最多可以为255个字符 3.除了正斜线以外,都是有效字符 ...

  9. Linux动态连接器

    转自:Chapter 9. Dynamic Linking 参考:Linux动态链接器 Linux加载启动可执行程序的过程(一)内核空间加载ELF的过程 Linux加载启动可执行程序的过程(二)解释器 ...

  10. mybatis遍历map

    mytabis是可以遍历map的,试过很多其他的方法都不行,最终使用如下方法是可以的: 1.mapper.java如下(注意要加@Param注解,否则不行,我就在这里折腾了不少时间): int upd ...