<!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. Spring依赖配置详解

    <properties> <junit.version>4.12</junit.version> <spring.version>4.3.9.RELEA ...

  2. linux安装imagemagick,centos安装imagemagick方法

    1.安装文件格式支持库 yum install tcl-devel libpng-devel libjpeg-devel ghostscript-devel bzip2-devel freetype- ...

  3. SqlServer中Index Seek的匹配规则（一）

    我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...

  4. flask/app.py-add_url_rule源码分析

    之前分析route方法的时候,可以看到中间会调用add_url_rule方法,add_url_rule方法和route方法一样属于Flask这个类的. add_url_rule方法主要用来连接url规 ...

  5. Hadoop HA 搭建

    Hadoop HA 什么是 HA HA是High Available缩写,是双机集群系统简称,指高可用性集群,是保证业务连续性的有效解决方案,一般有两个或两个以上的节点,且分为活动节点及备用节点.通常 ...

  6. vue实现一个评论列表

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

  7. stm32 引脚映射 和 ADC

    老是弄不明白ADC的输入到底在哪,看了stm32F103Ve的datasheet,将引脚和通道的映射关系贴在下面: 好了,写到这,我已经看了中文手册一上午了,可是啥都没看懂,下午接着看,写代码不重要, ...

  8. 安装配置nginx之后访问不了nginx的问题

    我刚开通的服务器,没有设置安全组规则. 进入云服务控制台 配置规则 其他不要动,授权对象加0.0.0.0/0 就可以访问nginx了

  9. dubbo spring 的使用

    1:项目的架构,本项目使用的maven,分为三个模块. api 为接口 , server 为服务端   consumer 为调用端 2:api的模块结构 该模块主要是定义接口和实体.没什么具体介绍的. ...

  10. Vue框架之基础知识

    在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...