Open Site Navigation
Maveristic

Be Valuable, Not Available

© 2020-2021 by Maveristic 

Web Design & Development Company

Subscribe to Our Mailing List

Thanks for submitting!

Wix Icon Level Partner
View Our Ratings
Maveristic

Be Valuable, Not Available

Follow Us

  • LinkedIn
  • Facebook
  • YouTube
  • Instagram

Email Us:

support@maveristic.in

Contact Us:

+91-9821610806

  • Canute Fernandes

[UPDATED] How to add slider to EditorX?

Updated: Sep 7

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: