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