iframe+swiper轮播图

最新推荐文章于 2024-05-30 17:27:43 发布

原创

最新推荐文章于 2024-05-30 17:27:43 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

布局方式：iframe自适应高度+底部轮播图（swiper）。
效果如图：在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" href="/favicon.png" type="image/x-icon" />
    <meta name="x-server-env" content="dev" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>暑期作业</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"
    />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script&g