谷歌事件与Unslider.js日历

我想创建一个使用谷歌日历和unslider jQuery滑块未来事件的可滚动事件列表。我已经能够将谷歌日历的事件转换为列表格式。然而，插件生成的列表项目不被Unslider.js识别。当页面加载两个日历项目时，只是从屏幕上推下。我只能让它工作如果我手动把列表项放入html中。下面是我的小项目中的链接，所以你可以看到自己http://timothybilcke.com/bspace-gcal/我希望得到任何帮助，因为我似乎不能算出这个谷歌事件与Unslider.js日历

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    jQuery(function ($) { 
     $('#eventlist').gCalReader({ 
     // Public Google Calendar 
      calendarId:'[email protected]', 
     // Google API KEY 
     apiKey:'AIzaSyAhvqdyBZZlvoO_JrU9KjyDfHGffV-GGbA', 
     futureEventsOnly: true, 
     sortDescending: true 
    }); 
    "use strict"; 
    $('.banner').unslider({ 
     speed: 500, // The speed to animate each slide (in milliseconds) 
     delay: 3000,// The delay between slide animations (in milliseconds) 
     complete: function() {}, // A function that gets called after every slide animation 
     keys: true, // Enable keyboard (left, right) arrow shortcuts 
     dots: true, // Display dot navigation 
     autoplay:false, 
     fluid: false 
} ); 
}); 
</script> 
<link rel="stylesheet" href="css/unslider.css"> 
<link rel="stylesheet" href="css/unslider-dots.css"> 

<div class="banner"> 
    <ul id="eventlist" class="list-group"></ul> 
</div> 

<script src="js/jquery.googlecalreader-1.1.min.js"></script> 
<script src="js/unslider.js"></script> 
<script src="js/events-slider.js"></script>

来源

2016-05-19 bilcker

从本质上讲，unslider正在被谷歌CAL前的DOM阅读事件被加载。这就是为什么你的静态工作和谷歌校正工作没有。

一个快速的解决方案，但不是最可靠的，将围绕你的unslider插件包装setTimeout（）。

setTimeout(function(){ 
    $('.banner').unslider({ 
    speed: 500,    // The speed to animate each slide (in milliseconds) 
    delay: 3000,    // The delay between slide animations (in milliseconds) 
    complete: function() {}, // A function that gets called after every slide animation 
    keys: true,    // Enable keyboard (left, right) arrow shortcuts 
    dots: true,    // Display dot navigation 
    autoplay:false, 
    fluid: false 
    }); 
}, 1000);

更可靠的解决方案是向google cal reader插件添加onComplete回调函数。它看起来没有回调选项，所以你可能需要编辑插件并添加一个。

来源

2016-05-20 14:33:24 dgas02

谷歌事件与Unslider.js日历

回答

相关问题