Question

我正在尝试使用Google日历和unlider 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>

Answer 1

基本上，在加载google cal事件之前，dom会读取unlider。这就是你的静态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回调函数。它看起来不像是一个回调选项，因此您可能需要编辑插件并添加一个。

使用Unslider.js的Google Events日历

1 个答案: