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

<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"
        />
        <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>

你可能感兴趣的:(css,html,javascript)