updated about 1 month ago
NOTE: This functionality is intended only for advanced users. Beyond what is available in this Knowledge Base page, the Splide web pages and the demo project this aspect of Splider is unsupported by Shaking the Habitual.
You can read about all of the available methods over on the Splide API documentation. There is no point in me replicating that here. The key differences to note are:
- All of the example code on the Splide pages use the variable 'splide'. With Splider, the variable name that you will need to reference will depend on the Splider ID that you set in the stack settings (more information below)
- Sliders built on the Splide examples tend to use <li> elements, in Splider we use <div> - this will only be relevant if you are looking to dynamically add slides to you’re Splider instance
- Splider stack mounts the slider and so you shouldn't need to use the mount command (unless you have used the destroy method). i.e. the following part is already done for you when using Splider:
var splide = new Splide( '#splide' ).mount();(the only difference being the variable name as detailed above)
To use any of this functionality with Splider you need to first set your Splider stack to have a unique ID. This is done in the 'Advanced' section of the settings.
In the image above we have set a Splider ID of 1 (the default is 0). This would result in a variable of
splider1 being created and it is this that you would need to use when referencing this Splider instance in your code. The examples below will use this variable name in the code.
I'll just go through a few simple examples here (all of which are available in the demo file).
- To create a custom button that lets the user go to the next slide you can add this as the url on the button:
- To create a custom button that lets the user go to the previous slide you can add this as the url on the button:
- To go to a particular slide you can add this:
- To adjust Splider options you can add this:
Tips / Ideas
You could use a Splide event listener so that you could (for example) set a custom 'Previous' button to become inactive if the index of the active slide = 0. Or the Next button to become inactive if the index = length - 1.
You could possibly even add some (e.g.) php code to link to a csv file and create an array of values that you could then loop through and create a slide for each row.
If you come up with some nice use cases / examples of using this functionality then please consider sharing on the RW4ALL forum.