Swiper垂直异形滚动

洋小驼

已于 2025-02-25 15:50:23 修改

阅读量551

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2024-06-21 11:17:24 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34925033/article/details/139855929

在这里插入图片描述

<!DOCTYPE html>
<!-- saved from url=(0048)https://www.swiper.com.cn/demo/slides-scale.html -->
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://www.swiper.com.cn/package/swiper-bundle.min.css">
  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

  <!-- Demo styles -->
  <style>
    html,
    body {
   
   
      position: relative;
      height: 100%;
    }

    body {
   
   
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
   
   
      width: 100%;
      height: 100%;
    }

    .swiper {
   
   
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
   
   
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 11px #ccc;
    }

    .swiper-slide.swiper-slide-active{
   
   
      z-index: 999!important;
    }

    .swiper-slide img {
   
   
      display: block;
      width: 100%;
      height: 100%;
      object-fit: