浏览器&手机屏幕兼容

最新推荐文章于 2024-04-28 19:39:51 发布

九

最新推荐文章于 2024-04-28 19:39:51 发布

阅读量636

点赞数

分类专栏： html javaScript 文章标签： html javascript swiper

本文链接：https://blog.csdn.net/qq_31301099/article/details/50343153

版权

javaScript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta 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="swiper.min.css">

    <!-- 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;
            /*height: 960px;*/
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body id="swiper1">
<!-- Swiper -->
<div class="swiper-container" id="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"  >
        <img src="B1.jpg">
        </div>

        <div class="swiper-slide" >
            <img src="B2.jpg">
        </div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
<script>

    </script>

<!-- Swiper JS -->
<script src="swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    
    window.οnlοad=function(){
        var swiper_1 = document.getElementById("swiper");
        var scale = window.screen.height / window.screen.width;
        	swiper_1.style.height = document.body.clientWidth * scale+ "px";
        alert(swiper.style.height);        document.getElementById("swiper1").style.height="swiper_1.style.height";
    }    var swiper = new Swiper('.swiper-container', {        pagination: '.swiper-pagination',        paginationClickable: true,        direction: 'vertical'    });</script></body></html>

九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器&手机屏幕兼容

html>html lang="en">head> meta charset="utf-8"> title>Swiper demotitle> meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> li
复制链接

扫一扫

专栏目录