Google 活动日历 Unslider.js

Question

我正在尝试使用 google 日历和 unslider jquery 滑块创建未来事件的可滚动事件列表。我已经能够将 google 日历的事件提取为列表格式。然而，插件生成的列表项未被 The Unslider.js 识别。当页面加载时，这两个日历项目被推出屏幕。如果我手动将列表项放入 html，我只能让它工作。这是我的小项目的 link，所以你可以自己看看 http://timothybilcke.com/bspace-gcal/ 我将不胜感激任何帮助，因为我似乎无法弄清楚

<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:'ed.amdsb.ca_gs9t0pil904j11hr2qfcha1cvo@group.calendar.google.com',
        // 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>

Answer 1

本质上，在加载 google cal 事件之前，dom 正在读取 unslider。这就是为什么你的静态 li 工作而 google cal 不工作的原因.

一个快速但不是最可靠的解决方案是在您的 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 回调函数。好像没有回调选项，所以你可能需要编辑插件并添加一个。

Google 活动日历 Unslider.js

Google Events Calendar with Unslider.js

jquery

google-calendar-api

unslider