Search code examples
jquerytwitter-bootstrap-3mustacheswipe.js

Mustache template not showing in swipejs slider until page is resized


I'm using a mustache template to load slides into a swipejs slider. When I load the page and check the source, the slides have loaded as expected. However, the slides don't actually show on the page unless I resize the page, both in desktop and mobile. Any ideas how to make them visible right away?

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

Solution

  • After slides are added to the slider container, you have to call the setup() method:

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