template.html

<!DOCTYPE HTML>
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <!-- Mimic Internet Explorer -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="UTF-8" />
  <meta name="content-type" content="website" />
  <meta http-equiv="refresh" content="1800" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="Stefan Bernhardt" />
  
  <script type="text/javascript" src="jquery.min.js"></script>  
  <link type="text/css" rel="stylesheet" href="style.css" />
  <link type="image/x-icon" rel="shortcut icon" href="." />
  <title>iDiv events</title>
</head>

<body>

  <header>
    <div class="gradient-wrapper">
      <div class="gradient" id="gradient-counter">&nbsp;</div>
    </div>
    <div class="header-content">
      <div><img src="img/logo-idivEventCalendar.png" alt="iDiv event calendar logo" /></div>
      <div>
        <p id="date">&nbsp;</p>
        <p id="time">&nbsp;</p>
      </div>
    </div>
  </header>

  <div class="main-wrapper">
    <div class="main-content">
      <ul class="event-list">
      {% for event in html_list %}
        <li>
          <div class="event-wrapper">
            <p class="event-date">
              {{ event.date }}
            </p>
            <h2 class="event-title">
              {{ event.name }}
            </h2>
            <p class="event-location">
              {{ event.location }} 
            </p>
          </div>
        </li>
      {% endfor %}
      </ul>
    </div>
  </div>

  <footer>
    <div class="pagination-wrapper">
      <ul class="pagination">
      </ul>
    </div>
    <div class="footer-content">
    </div>
  </footer>

<script type="text/javascript">
var eventsPerSlide = 3;
var timePerSlide = 10000;
var slides = Math.ceil($('.event-list li').length / eventsPerSlide);

// set height of event items
var height = $('.main-wrapper').height();
height = height / (eventsPerSlide * 1.1) ;

function contentHeight(height) {
  $('.event-list li').css({
    'height': height
  });
}
setInterval(function(){ contentHeight(height), 100 });

// create pagination
for (var i = 0; i < slides; i++) {
  $('.pagination').append('<li>&nbsp;</li>');
};

// enable defaults
$('.pagination li:first-child').addClass('active');
$('.event-list li:first-child').addClass('event-first');
$('.event-list li:lt(3)').removeClass('event-inactive').addClass('event-active');


function eventTicker(){
  var eventsLength = $('.event-list li').length;

  // disable active items and append items at the end of list 
  $('.event-list li.event-active').removeClass('event-active').addClass('event-inactive').appendTo('.event-list');

  // check if first item in list is first event
  if ($('.event-list li:first-child').hasClass('event-first') == true ) {

    // enable next items in list
    $('.event-list li:lt(' + eventsPerSlide + ')').removeClass('event-inactive').addClass('event-active');
    $('.pagination li.active').removeClass('active');
    $('.pagination li:first-child').addClass('active');

  // first event is not part of the first three items
  } else if (!$('.event-list li:lt(' + eventsPerSlide + ')').hasClass('event-first') ) {

    // enable next items in list
    $('.event-list li:lt(' + eventsPerSlide + ')').removeClass('event-inactive').addClass('event-active');
    $('.pagination li.active').removeClass('active').next().addClass('active');

  } else {

    // start loop to check following items
    for (var i = 2; i <= eventsPerSlide; i++) {
      // check if following items have class 'event-first'
      if ( $( '.event-list li:lt(' + i + ')').hasClass('event-first') == true ) {
        var j = i-1;
        // enable i-next item in list
        $('.event-list li:lt(' + j + ')').removeClass('event-inactive').addClass('event-active');
        $('.pagination li.active').removeClass('active').next().addClass('active');

        break;
      };
    };

  };

}
setInterval(function(){ eventTicker() }, timePerSlide);

function currentTime() {

  var d = new Date();
  var month = d.getMonth()+1;
  var day = d.getDate();
  var h = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();

  var date = (day<10 ? '0' : '') + day + '.' + (month<10 ? '0' : '') + month + '.' + d.getFullYear();
  var time = (h<10 ? '0' : '') + h + ":" + (m<10 ? '0' : '') + m + ':' + (s<10 ? '0' : '') + s;

  $('#date').text(date);
  $('#time').text(time);
}
setInterval(function(){ currentTime() }, 1000);


</script>

</body>
</html>