Skip to main content
All CollectionsAdvanced Design
Slider transition override or change
Slider transition override or change

Learn how you can override the slider options. Where the options in the widget are not exactly what you want.

Niall Diamond avatar
Written by Niall Diamond
Updated over 2 years ago

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. 

  1. 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. 

  2. Then add that number (id) into the below script for the widget_id and the id

  3. Then add the script to your footer block in the Admin >> Appearances >> Theme Options

Get the ID of the widget

👍 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. 

👍 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

Did this answer your question?