谷歌事件與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日曆

回答

相關問題