滑块仅在第一页 (jQM) 上工作，但在第二页、第三页和第三页上失败答案

【问题标题】：Slider just working on First Page (jQM), but Failed on Page Two, Three and on滑块仅在第一页 (jQM) 上工作，但在第二页、第三页和第三页上失败
【发布时间】：2014-03-25 23:22:12
【问题描述】：

大家好，我在 JQM 多页文档上遇到了 Swiper 问题。

我在我的 JQM 项目中使用 http://www.idangero.us/sliders/swiper/ 的 Swiper。

我可以在我的多页 JQM 文档结构的第一页上进行幻灯片显示并正常工作。但是，当我尝试将滑块放到第一页以外的其他 JQM 页面时，幻灯片“将加载并显示”但“无法正常工作”。

无法正常工作的说明：加载错误会导致整个滑块宽度不正确，内容/列表未完全加载，滑动手势无法正常工作，如当左右滑动/拖动时，它应该在每张幻灯片上停止。

请帮忙，谢谢。

以下两个示例，首先我在 JQM 文档的第一页加载 Swiper 并使其正常工作：

这是用于工作滑块的 JSfiddle [第一页]：http://jsfiddle.net/h73k2/11/

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/appstore.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
</head>
<body> 

<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page One</h1>
    </div><!-- /header -->

    <div data-role="content">
                <div class="swiper-container featured">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
            </div>
        </div>
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#page2">Page Two</a></p>  
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page Two</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#page1">Back to Page One</a></p>    
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

    <!-- content goes here-->


<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<!-- Don't forget to get the latest Swiper and scrollbar version here-->
<script src="js/idangerous.swiper-2.0.min.js"></script>
<script src="js/idangerous.swiper.3dflow-2.0.js"></script>
<script src="js/appstore.js"></script>
</body>
</html>

JSfiddle for Not-Working Slider [第二页]： http://jsfiddle.net/jgYGJ/8/

将 Swiper DIV 移至第二页后，无法在以下页面上工作：

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/appstore.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
</head>
<body> 

<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page One</h1>
    </div><!-- /header -->

    <div data-role="content">

        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#page2">Page Two</a></p>  
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page Two</h1>
    </div><!-- /header -->

    <div data-role="content">
                <div class="swiper-container featured">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
                </div>
                <div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
                </div>
            </div>
        </div>
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#page1">Back to Page One</a></p>    
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

    <!-- content goes here-->


<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<!-- Don't forget to get the latest Swiper and scrollbar version here-->
<script src="js/idangerous.swiper-2.0.min.js"></script>
<script src="js/idangerous.swiper.3dflow-2.0.js"></script>
<script src="js/appstore.js"></script>
</body>
</html>

JS 启动 swiper：

$(function(){
    //Featured Slide
    var featuredSwiper = $('.featured').swiper({
        slidesPerView:'auto',
        centeredSlides: true,
        initialSlide:7,
        tdFlow: {
            rotate : 30,
            stretch :10,
            depth: 150
        }
    })

    //Thumbs
    $('.thumbs-cotnainer').each(function(){
        $(this).swiper({
            slidesPerView:'auto',
            offsetPxBefore:25,
            offsetPxAfter:10,
            calculateHeight: true
        })
    })

    //Banners
    $('.banners-container').each(function(){
        $(this).swiper({
            slidesPerView:'auto',
            offsetPxBefore:25,
            offsetPxAfter:10
        })  
    })
})

代码更新：

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.4.0.min.js"></script>
    <!-- Don't forget to get the latest Swiper and scrollbar version here-->
    <script src="js/idangerous.swiper-2.0.min.js"></script>
    <script src="js/idangerous.swiper.3dflow-2.0.js"></script>
    <!--    <script src="js/appstore.js"></script>-->
    <script>
            $(document).on("pagecontainerbeforehide", function (e, ui) {
            var activeP = ui.nextPage;
            var activeID = ui.nextPage[0].id;
            if (activeID == "page2" && $(".swiper-container", activeP).length === 0) {
                $("body .swiper-container")
                    .removeClass("swiper-hidden")
                    .prependTo($(".ui-content", activeP));
            }
        });
    </script>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/appstore.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
</head>
<body> 

<!-- Start of first page -->
<div data-role="page" id="page1">
    <div data-role="header">
            <h1>Page One</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View Slider on <a href="#page2">Page Two</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page2">
    <div data-role="header">
            <h1>Page Two</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#page1">Back to Page One</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- content goes here-->
<div class="swiper-container featured swiper-hidden">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/1.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/2.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/3.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/4.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/5.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/6.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/7.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/1.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/2.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/3.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/4.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/5.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/6.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(http://furkidtag.com/img/big/7.jpg)"></div>
    </div>
</div>

</body>
</html>

【问题讨论】：

你要在所有页面上使用同一个刷卡器吗？
嗨@Omar，现在我不打算在同一页面上使用。它目前在不同的页面上。我希望解决这个问题以了解我做错了什么。然后我可以研究在同一页面上使用多个滑块的方法。
问题是swiper自动初始化，所以你无法控制什么时候初始化。我可以通过将其预加载到任何页面之外来解决此问题，然后在初始化后将其复制到目标页面。稍后我会给你一个演示 b
谢谢。等待您的更新。
jsfiddle.net/Palestinian/DL2cq 勾选此项，swiper 已预加载，然后附加到目标页面。

标签： javascript jquery html css jquery-mobile

【解决方案1】：

您需要在pagecontainershow 事件上初始化“swiper”。该事件无法绑定到特定页面，因此您需要检索活动页面的 id，并将其与包含“swiper”的页面的 id 进行比较。

将以下代码放在head 中，不要将其包装在$(function () {}); 中。

$(document).on("pagecontainershow", function () {
    $.mobile.pageContainer.pagecontainer("getActivePage").find('.featured').swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 7,
        tdFlow: {
            rotate: 30,
            stretch: 10,
            depth: 150
        }
    });
});

Demo

检索活动页面的id

$(document).on("pagecontainershow", function () {
  /* page's object */
  var active = $.mobile.pageContainer.pagecontainer("getActivePage");
  /* page's id */
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
  if( activePage == "targetPageID") {
    $(".featured", active).swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 7,
        tdFlow: {
            rotate: 30,
            stretch: 10,
            depth: 150
        }
    });
  }
});

Demo

【讨论】：

您好，感谢您的演示。我发现了一些东西。如果您单击返回到第一页，然后返回到第二页，然后返回到第一页。您会看到图像越来越暗，就像样式复制一样。
@user3053891 是的，看起来小部件在显示页面时正在初始化。这可以修复。
嗨@Omar，这发生在你身上吗？每当我刷新页面并首先单击页面链接时，滑块将在一瞬间显示为没有样式，然后仅更改为具有样式的滑块。它发生在你身上吗？
@user3053891 是的，这是正常的，因为您在页面完全显示时初始化 swiper。如果你想避免这种情况，你需要预先加载它，然后像第一个演示一样复制它。
再次感谢您的帮助。如果值得，请投票支持我的问题。谢谢。