The slider control allows you to implement Carousel like functionality where you can swipe left and right to display different items:

🚧

Naming of control

The current naming of Slider control and Slider line control is a bit confusing. We will rename Sliderline control to Slider control, and Slider control to something like Scroll control in the future.

• What you know from iOS and Android as slider is called SliderLine
• Slider control is known as Carousel in iOS and Android

Use Class to describe data container

First, we want to use data from the Pic class to bind to the slider's element. You can use a class or a simpler data type. If you use a class, you currently still need to inherit from EObject.

import ScadeKit

class Pic : EObject { 
    let url : String
    
    init(_ filename:String) {
        self.url = "./assets/\(filename)"
    }
}

Design the page

1. Add the slider control and center it.
2. Insert an image control within the slider control

Add code to main page

You use the elementProvider attribute to specify a provider object of type SCDWidgetsElementProvider. A provider maps data to the slider's display element controls, you use it to populate the controls within the slider's elements.

self.slider1.elementProvider = SCDWidgetsElementProvider { (item: Pic, template) in
      
    guard let image = template.getWidgetByName("image1") as? SCDWidgetsImage else { return }

    image.url = item.url
    image.contentPriority = false
}

Capture slide event and slider positions

The event is of type SCDWidgetsSlideEventand has the attributes to and from. In this example, we use to in order to get the url of the Pic object.

Using the items property you can access the next data object we are sliding to.

// Use the onSlide handler to capture slide events
self.slider1.onSlide.append(SCDWidgetsSlideEventHandler { e in 
    guard let nextpos = e?.to, nextpos>=0 && nextpos<self.slider1.items.count else { return }
            let picNext = self.slider1.items[nextpos] as! Pic
                print(picNext)
})

Slide to a specific item

The item count starts at zero, so to goto 2nd item, set .selected = 1. You cannot use the property in the load method(), use the show method instead

override func show(view: SCDLatticeView?) {
  super.show(view:view)

  // selected works only within the show function
  self.slider1.selected = 1
}

Using a more generic element provider

You can use the raw SCDWidgetsElementProvider init method to have access to more technical attributes

slider.elementProvider = SCDWidgetsElementProvider { item in
        guard let slider  = item?.target as? SCDWidgetsSlider,
              let pos = item?.position else { return nil }

   guard let newElement = slider.template?.copyControl() as? SCDWidgetsGridView,
      !newElement.children.isEmpty,
      let image = newElement.getWidgetByName("image1") as? SCDWidgetsImage else { return nil }

   image.url = "Assets/\(pos + 1).png"
   image.contentPriority = false

   return newElement
}

Properties and methods