0

口ひげテンプレートを使用して、スライドを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>
4

1 に答える 1

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>
于 2013-10-27T18:26:21.613 に答える