SOURCE CODE: Slideshow of Data

VIEW EXAMPLE




  Slideshow of Data | JavaScript Examples | UIZE JavaScript Framework
  
  
  
  
  
  
  
  
  






UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Slideshow of Data

One can be forgiven for thinking of a slideshow as being just about a series of photos. However, the Uize.Widget.SlideShow class is implemented to be generic, versatile, and agnostic as to the contents of the slides in the slide set. This allows us to have a slideshow focused on presenting data, where the data from each slide is represented by a series of widgets that are added as child widgets of the slideshow widget. In this example, a slideshow is presented of nutritional data for various fruits. Instances of Uize.Widget.Bar are used to represent the values of various nutritional properties. An instance of Uize.Widget.Swap.Image is used to create a backdrop to the data bars that dissolves across transitions using a JavaScript animation effect.

 
Calories Total Fat Sat. Fat Cholesterol Sodium Total Carbs Dietary Fiber Sugars Protein Calcium Potassium