<!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>
。。。