0

我正在尝试使用 google 日历和 unslider jquery 滑块创建一个可滚动的未来事件列表。我已经能够将谷歌日历的事件提取为列表格式。但是，Unslider.js 无法识别插件生成的列表项。当页面加载时，两个日历项刚刚被推离屏幕。如果我手动将列表项放入 html，我只能让它工作。这是我的小项目的链接，因此您可以自己查看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>
4

1 回答 1

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 阅读器插件添加 onComplete 回调函数。看起来没有回调选项，因此您可能需要编辑插件并添加一个。

于 2016-05-20T14:33:24.587 回答