Daily Events Table or Panels Carousel

Daily-events 'table' and 'panels carousel' layouts - all with date-picker and ajax loading of new data.

Daily Events Table

Daily Events

Special Events

Time Special event
10:00 AM
Katherine Jenkins LIVE
16:30 PM
Sunset Safari Evenings

Daily programme

Time Event Location
10:30 AM
Meerkat Feeding Time
Into Africa
11:00 AM
Leaping Lemurs Feeding Time
Into Africa
11:30 AM
Wallaby Walkabout Feeding Time
Wallaby Walkabout
12:00 PM
South America Viva Feeding Time
Somewhere
12:15 PM
Lion Tales Ranger Talk
A place
12:30 PM
Big Bugs LIVE
Another location
1:00 PM
Roloway Monkeys Ranger Talk
A place
1:30 PM
Talking Tigers
Another location
2:00 PM
Painted Dog Ranger Talk
Quisque rutrum enim pharetra magna tristique.
Somewhere
2:30 PM
South America Viva Feeding Time
A place
3:00 PM
Deadly Bugs LIVE
A place
3:00 PM
Into Africa! Ranger Talk
Another location
3:30 PM
Wallaby Walkabout Feeding Time
Somewhere
4:00 PM
Leaping Lemurs Feeding Time
Another location
4:30 PM
Giant Otters Ranger Talk
Somewhere

Daily Events Table inside a panel

Daily Events

Special Events

Time Special event
10:00 AM
Katherine Jenkins LIVE
16:30 PM
Sunset Safari Evenings

Daily programme

Time Event Location
10:30 AM
Meerkat Feeding Time
Into Africa
11:00 AM
Leaping Lemurs Feeding Time
Into Africa
11:30 AM
Wallaby Walkabout Feeding Time
Wallaby Walkabout
12:00 PM
South America Viva Feeding Time
Somewhere
12:15 PM
Lion Tales Ranger Talk
A place
12:30 PM
Big Bugs LIVE
Another location
1:00 PM
Roloway Monkeys Ranger Talk
A place
1:30 PM
Talking Tigers
Another location
2:00 PM
Painted Dog Ranger Talk
Quisque rutrum enim pharetra magna tristique.
Somewhere
2:30 PM
South America Viva Feeding Time
A place
3:00 PM
Deadly Bugs LIVE
A place
3:00 PM
Into Africa! Ranger Talk
Another location
3:30 PM
Wallaby Walkabout Feeding Time
Somewhere
4:00 PM
Leaping Lemurs Feeding Time
Another location
4:30 PM
Giant Otters Ranger Talk
Somewhere

Daily Events Panels Carousel

Daily Events

Panels carousel - autoplay using data-autoplay="[milliseconds]" attribute

The default delay (time between slide moves) is 3000 (3 seconds)

Daily Events

Full-width (no 'container') Panels carousel - bleeds off edges of viewport

Uses the daily-events-panels-carousel--full-width modifier class, plus adjusted HTML.

Daily Events

Full-width Panels carousel - non-looping with container alignment at start and finish.
This means the carousel will bleed to the right at larger viewport sizes.

Uses the daily-events-panels-carousel--full-width and daily-events-panels-carousel--container-aligned modifier classes, plus adjusted HTML.

Daily Events