swiper4.x 长图竖屏翻页滚动demo

最新推荐文章于 2023-08-31 10:46:49 发布

阿波次嘚

最新推荐文章于 2023-08-31 10:46:49 发布

阅读量691

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_45062076/article/details/130640650

版权

<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 rel="stylesheet" href="./swiper.min.css" />
        <style>
            body {
                margin: 0;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
            }
            .swiper-slide {
                text-align: center;
                font-size: 18px;
            }

            #swiper-container1 .swiper-slide,
            #swiper-container2 .swiper-slide,
            #swiper-container3 .swiper-slide {
                height: auto;
                line-height: 100px;
                color: #fff;
            }

            .swiper-scrollbar {
                background: transparent;
            }
            .swiper-scrollbar-drag {
                background: transparent;
            }

            .swiper-slide1 {
                background-color: #6d310f;
            }

            .swiper-slide2 {
                background-color: #4390ee;
            }

            .swiper-slide3 {
                background-color: rgb(54, 86, 5);
            }
        </style>
    </head>
    <body>
        <div class="swiper-container" id="swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide1">未超过屏幕长度</div>
                <div class="swiper-slide">
                    <div class="swiper-container" id="swiper-container2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide2">
                                <h4>长内容</h4>
                                <p style="opacity: 0.99">
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                </p>
                            </div>
                        </div>
                        <div class="swiper-scrollbar swiper-scrollbar2">
                            <div class="swiper-scrollbar-drag"></div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-container" id="swiper-container3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide3">
                                <h4>长内容</h4>
                                <p style="opacity: 0.99">
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                    一<br />段<br />很<br />长<br />的<br />内<br />容
                                </p>
                            </div>
                        </div>
                        <div class="swiper-scrollbar swiper-scrollbar3">
                            <div class="swiper-scrollbar-drag"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="./swiper.min.js"></script>

        <script>
            window.onload = function () {
                var mySwiper1 = new Swiper("#swiper-container1", {
                    direction: "vertical",
                });

                var mySwiper2 = new Swiper("#swiper-container2", {
                    //子swiper2
                    direction: "vertical",
                    nested: true,
                    slidesPerView: "auto",
                    freeMode: true,
                    scrollbar: {
                        el: ".swiper-scrollbar2",
                    },
                });

                var mySwiper3 = new Swiper("#swiper-container3", {
                    //子swiper3
                    direction: "vertical",
                    nested: true,
                    slidesPerView: "auto",
                    freeMode: true,
                    scrollbar: {
                        el: ".swiper-scrollbar3",
                    },
                });
            };
        </script>
    </body>
</html>