<!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. Thymeleaf模板引擎与springboot关联后，在html中无法使用el表达式获取model存的值

    头部引入了thymeleaf <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thy ...

  2. VS.NET(C#)--2.8_CCS样式

    CSS样式 文件命名 StyleSheet.css     body { font-size:12px } .button     { color:Red; text-decoration:none; ...

  3. .Dot NET Cored简介

    一.诞生原因 1..Net平台封闭. 2.不支持跨平台. 3.受限于Windows平台性能,无法解决高性能场景. 二.优势 1.支持跨平台.开源.系统建设成本低. 2.效率和性能较好. 三.缺点 1. ...

  4. IServiceBehavior IContractBehavior IEndpointBehavior IOperationBehavior

    using System; using System.Collections.ObjectModel; using System.Reflection; using System.ServiceMod ...

  5. 简介：google ctemplate：简单易用的文字模板(转载)

    转自:http://blog.csdn.net/aladdina/article/details/4531736 CTemplate 是一个简单实用.功能强大的文字模板(template langua ...

  6. git一些简单运用

    1.删除本地文件后,继续从远处仓库拉取回来,提示up-to-date,执行如下 git reset --hard origin/master 待补充

  7. day01-02

  8. ABAP-会计凭证替代字段GB01设置

    1.GB01表字段设置 SM30:VWTYGB01 找到需要替代的字段,设置bexclude勾选为空 2.运行程序 RGUGBR00 激活

  9. QSqlDatabase数据库

    #include <QSqlDatabase> #include <QtDebug> #include <QSqlQuery> #include <QSqlE ...

  10. base64码通过http传输 +号变 空格 以及 图片编码后字符串较长导致POST提交失败 问题解决

    场景:图片上传OSS存储,接口拿字符串去接前端传的base64码,服务器打印入参传的值,发现和前端打印的值有所区别,服务器中打印的值所有+号全部变成空格. 解决办法: Java中使用:url = ur ...