Hi Guys,
I have been recently using EditorX extensively and was trying to set up a slider for a client of mine. Currently, Sliders are not possible in the EditorX version. This requirement made me try various logic and wonder how can I get the auto-slider in place.
We can use a repeater to display single items and move to the next item using onClick or mouseIn function. I never was able to auto slide a repeater before until I came across this particular requirement on EditorX and the client needed the slider that was present on the Editor.
Code:
$w.onReady(function () {
setTimeout(loadSlider,6000)
});
function loadSlider(){
if($w("#dbServices").getCurrentItemIndex() === 5){
$w("#dbServices").loadPage(1)
}else{
$w("#dbServices").nextPage()
}
setTimeout(loadSlider,6000)
}
[UPDATED CODE WITH SMOOTH TRANSITION - FADE IN & FADE OUT]
$w.onReady(function () { setTimeout(loadSlider,6000) }); function loadSlider(){ if($w("#dbSlider").getCurrentItemIndex() === 3){ $w("#sliderRepItem").hide('fade').then(()=>{ $w("#dbSlider").loadPage(1).then(()=>{ $w("#sliderRepItem").show() }); }) }else{ $w("#sliderRepItem").hide('fade').then(()=>{ $w("#dbSlider").nextPage().then(()=>{ $w("#sliderRepItem").show() }); }) } setTimeout(loadSlider,6000) }
Logic:
Step 1:
setTimout(function,seconds)
Function:
You need to define the function and not give a reference to a dataset or input the code directly.
Seconds:
This is the time between the transition i.e. how many seconds will the current item stay before moving to the next item.
Step 2:
Defining the logic for function captured in the setTimout.
In the auto-slider scenario, we need to use if-else asking the page to move to next or load the first item in the dataset depending on the logical scenario.
Part 1:
if($w("#dbServices").getCurrentItemIndex() === 5){
$w("#dbServices").loadPage(1)
}
When we are setting the base criteria we have used getCurrentItemIndex(). This will help the code to identify the index of the item present in the referred dataset.
**Note: The numbering logic here to be used to define indexing is the same as python numbering logic.
Item 1 = 0
Item 2 = 1
Item 3 = 2 and so on
When we are defining loadPage i.e. get the first item in the dataset we need to use the regular numbering logic. Here we are calling the item directly from the dataset and have to use the direct position in the dataset as shown below:
Item 1 = 1
Item 2 = 2
Item 3 = 3 and so on
Part 2:
else{
$w("#dbServices").nextPage()
}
setTimeout(loadSlider,6000)
}
In the second part of the code, we set a rule to go to the next page if the first scenario is not met. And then we set a loop to begin the process for auto-slider ensuring that once we reach the last item of the dataset we run the process from the start and continue the process in a loop.
Happy Auto-sliding!