Cyclops Example

An example of cycling through both a list and table every three seconds.

by Tom Burton

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/t0mburton/jquery.cyclops/master/jquery.cyclops.js"></script>
<div class="col-xs-6 text-center">
  <div class="panel-heading">List</div>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Item 1</li>
    <li class="list-group-item list-group-item-warning">Item 2</li>
    <li class="list-group-item list-group-item-info">Item 3</li>
    <li class="list-group-item list-group-item-success">Item 4</li>
    <li class="list-group-item list-group-item-warning">Item 5</li>
    <li class="list-group-item list-group-item-info">Item 6</li>
  </ul>
</div>
<div class="col-xs-6 text-center">
  <div class="panel-heading">Table</div>
  <table class="table">
    <tr>
      <td class="success">Item 1</td>
    </tr>
    <tr>
      <td class="warning">Item 2</td>
    </tr>
    <tr>
      <td class="info">Item 3</td>
    </tr>
    <tr>
      <td class="success">Item 4</td>
    </tr>
    <tr class="warning">
      <td>Item 5</td>
    </tr>
    <tr class="info">
      <td>Item 6</td>
    </tr>
  </table>
</div>

CSS

tr,
li {
  height: 40px;
}

JavaScript

$("ul").cyclops({ delay: 3000, maxItems: 3, animate: true });
$("table").cyclops({ delay: 3000, maxItems: 3, animate: false });