jquery - 在调整页面大小之前，胡子模板不会显示在 swipejs 滑块中

Question

我正在使用 mustache 模板将幻灯片加载到 swipejs 滑块中。当我加载页面并检查源时，幻灯片已按预期加载。但是，除非我在桌面和移动设备中调整页面大小，否则幻灯片实际上不会显示在页面上。任何想法如何使它们立即可见？

<div class="container" style="padding:0;">
    <div id='slider' class='swipe'>
        <div id="slides-here" class='swipe-wrap'></div>
    </div>  
</div> <!-- /container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<script src="js/swipe.js"></script>
<script type="text/javascript">
    window.mySwipe = Swipe(document.getElementById('slider'), {
        continuous: false,
        speed: 100
    });
</script>
<script src="js/mustache.js"></script>
<script id="slide-template" type="text/html">
    <div class="lunch-day">
        <div class="lunch-day-inner">
            {{date}}
        </div>
    </div>
</script>
<script type="text/javascript">
    $.ajax({
url: "/lunch-menu/menu.php",
success: function(x){
    console.log(x);
    days = x.menu;
    for (i = 0; i < days.length; i++) {
        template = $("#slide-template").html();
        $("#slides-here").append(Mustache.render(template, days[i]));
    }
},
error: function(x){
    console.log(x);
}

    });
</script>

Answer 1

将幻灯片添加到滑块容器后，您必须调用 setup() 方法：

<script type="text/javascript">
    $.ajax({
        url: "/lunch-menu/menu.php",
        success: function(x){
            console.log(x);
            days = x.menu;
            for (i = 0; i < days.length; i++) {
                template = $("#slide-template").html();
                $("#slides-here").append(Mustache.render(template, days[i]));
                window.mySwipe.setup();
            }
        },
        error: function(x){
            console.log(x);
        }
    });
</script>