You have two ways to change the widget slider options. Either you can change just a specific slider on the page or you can choose to apply your new options to all of them.
🚀 Scroll to the Bottom to See Different Transition Effects
Option one: Just change the options for 1 slider on the page.
First, open chrome inspect element and find the id of the widget in question. This will change it you remove the widget and add it back. All you need is the number.
Then add that number (id) into the below script for the widget_id and the id
Then add the script to your footer block in the Admin >> Appearances >> Theme Options
Get the ID of the widget
Add the code to your Footer Block :
👍 Important: Don't forget to change the widget_id and the id to the id that you found above.
<script>
// change the ex-home body class based on what page type you are on (e.g. product page, search result page, etc)
if($('body.ex-home').length){
// remove the current options
MasterSliders = []
// set the new options
MasterSliders.push({
widget_id: 130632,
id: 130632,
type: 'imageslider',
speed: '7',
overPause: 1,
bullets: 1,
transitions: 'fade'
});
}
</script>
Option Two: Change the options for all sliders on the page.
Add the code to your Footer Block :
👍 Important: "1" means "On". Remove the line completely if you don't want that option
👍 Important: Speed attribute is accepts float values between 0 and 100 (typical setting is between 7 and 12)
<script>
// change the ex-home body class based on what page type you are on (e.g. product page, search result page, etc)
if($('body.ex-home').length){
MasterSliders.forEach(function (slider) {
slider.bullets = 1,
slider.type = 'imageslider',
slider.speed = '7',
slider.overPause = 1,
slider.transitions = 'fade'
});
}
</script>
Supported Transitions:
"fade"
"mask"
"wave"
"flow"
"stack"
"scale"
"focus"
"partialWave"
"fadeBasic"
"fadeWave"
🚀 That's it, have fun with your slider