swiper 响应式开发

2020-07-11 本文已影响0人宏_4491

1、轮播图需要响应式，图片在移动端和pc端要正常显示
2、使用的是swiper插件

官方网站下载好swiper.mini.js 和swiper.js 并且引入项目中
重点是在 slide-wrap 设置
display: flex;
justify-content: center;
align-items: center;
img 设置 object-fit: contain;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <style type="text/css">
        body,
        html {
            font-size: 16px;
            margin: 0;
            padding: 0;
        }

        .slide-wrap {
            display: flex;
            justify-content: center;
            align-items: center; 
        }

        .slide-wrap img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }

        .introdution {
            position: absolute;
            width: 80%;
            color: #ffffff;
        }

        .introdution h2 {
            font-size: 20px;
            text-shadow: 0 0 10px #000000;
        }

        .introdution p {
            font-size: 12px;
            text-shadow: 0 0 10px #000000;
        }

        @media (min-width: 500px) {
            .introdution {
                width: 80%;
            }

            .introdution h2 {
                font-size: 30px;
                text-shadow: 0 0 10px #000000;
            }

            .introdution p {
                font-size: 16px;
                text-shadow: 0 0 10px #000000;
            }

        }

        @media (min-width: 700px) {
            .introdution {
                width: 60%;
            }

            .introdution h2 {
                font-size: 40px;
                text-shadow: 0 0 10px #000000;
            }

            .introdution p {
                font-size: 20px;
                text-shadow: 0 0 10px #000000;
            }
        }
    </style>
</head>
<body>
    <div class="">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-wrap">
                        <img src="./beermeet.png" alt="">
                        <div class="introdution">
                            <div style="width: 30%;">
                                <h2>IROW MAN</br>钢铁侠</h2>
                                <p>vjjshdfhsihsnkdvdhdbjdvjbdbvdbpshsihihi</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</body>
</html>
<script src="./jquery-1.10.2.min.js"></script>
<script src="./swiper.min.js"></script>
<script>
    $(function () {
        //======轮播图初始化====
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项
            autoplay: {
                autoplay: true, //自动播放
                delay: 5000, //自动切换的时间间隔，单位ms
                disableOnInteraction: false, //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

    })
</script>

swiper 响应式开发

猜你喜欢

热点阅读