swiper 嵌套

時間 2019-12-05
標籤 swiper 嵌套简体版
原文原文鏈接
swiper官網：http://www.swiper.com.cn/javascript
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title>無標題文檔</title>
        <script>
            (function(doc, win) {
                var docEl = doc.documentElement,
                    recalc = function() {
                        var clientWidth = docEl.clientWidth;
                        if(!clientWidth) {
                            return
                        }
                        var w = 20 * (clientWidth / 375);
                        if(w > 40) {
                            w = 40
                        }
                        docEl.style.fontSize = w + "px"
                    };
                if(!doc.addEventListener) {
                    return
                }
                if("orientationchange" in window) {
                    win.addEventListener("orientationchange", recalc, false)
                }
                win.addEventListener("resize", recalc, false);
                win.addEventListener("load", recalc, false);
                doc.addEventListener("DOMContentLoaded", recalc, false);
                recalc()
            })(document, window);
        </script>
        <link href="../css/pages/style.css" rel="stylesheet" type="text/css">
        <script src="https://img.dianzhangzhipin.com/source/js/jquery-2.1.1.min.js"></script>
        <script>
            var require = { urlArgs: "v=v1.7" }
        </script>
        <style type="text/css">
            html,
            body,
            .swiper-container {
                height: 100%;
            }
            .swiper-container2{
                height: 10rem;
                background-color: pink;
            }
        </style>
        <script src="../js/utils/swiper.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    sssssssssssssssss
                    <div class="swiper-container2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                sssssssssssssssss

                            </div>
                            <div class="swiper-slide">
                                aaa
                            </div>
                            <div class="swiper-slide">
                                bbb
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    aaa
                </div>
                <div class="swiper-slide">
                    bbb
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var swiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                longSwipesRatio: 0.1,
                initialSlide: 0,
                mousewheelControl: true,
                onInit: function(swiper) {
                    //console.log(swiper.activeIndex);

                },
                onTransitionEnd: function(swiper) {

                },
                onTouchStart: function(swiper, e) {

                },
                onTouchMove: function(swiper, e) {

                },
                onSlideChangeStart: function(swiper) {
                    console.log(swiper.activeIndex);
                    console.log('changestart');
                },
                onSlideChangeEnd: function(swiper) {

                    console.log(swiper.activeIndex);
                    console.log('changeend');

                }
            });
            var swiper2 = new Swiper('.swiper-container2', {
                direction: 'horizontal',
                longSwipesRatio: 0.1,
                initialSlide: 0,
                mousewheelControl: true,
                onInit: function(swiper) {
                    //console.log(swiper.activeIndex);

                },
                onTransitionEnd: function(swiper) {

                },
                onTouchStart: function(swiper, e) {

                },
                onTouchMove: function(swiper, e) {

                },
                onSlideChangeStart: function(swiper) {
                    console.log(swiper.activeIndex);
                    console.log('changestart');
                },
                onSlideChangeEnd: function(swiper) {

                    console.log(swiper.activeIndex);
                    console.log('changeend');

                }
            });
        </script>
    </body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。