Slider

To create a simple slider, use slider structure

let elements = [
  {
    type: "slider"
  }
];

This code generates the Slider instance.

 let texts = [
    new Text("One").set({size: "S1", color: "#1abc9c", font: "Arial"}),

    new Text("Two").set({size: "S1", color: "#1abc9c", font: "Arial"}),
    
    new Text("Three").set({size: "S1", color: "#1abc9c", font: "Arial"}),

    new Text("Four").set({size: "S1", color: "#1abc9c", font: "Arial"}),
];

new Slider(
    texts, 
    null,
    { 
        tintColor: "#e74c3c",
        inactiveColor: "#ccc"
    }
    ) .render("#mount"); 

You can supply own buttons instead of the null argument. If no buttons are supplied, the default buttons are used.

new Slider(texts, {
        leftButton: new Button("<").set({
          frame: { width: 50, height: 50 },
          color: "#1abc9c", 
          radius: "100%",
          mar: { sides: ["all"], value: "1rem" },
        }),

        rightButton: new Button(">").set({
          frame: { width: 50, height: 50 },
          color: "#1abc9c", // adopt tintColor
          radius: "100%",
          mar: { sides: ["all"], value: "1rem" },
        }),

}, 

{ 
     tintColor: "#e74c3c",
     inactiveColor: "#ccc"
 })