This page details some common issues that we’ve run into with Splide, and their fixes.
Navigation Bumping on Transition
You may notice that when your slides transition, the navigation snaps downward, and then back up. It happens too fast to inspect. This is, fortunately, a known issue with the current developer, and there are a couple fixes you can try. If one doesn’t work, try the other!
Fix #1
On sliders that have only one slide visible, it will work to put display: flex on the .splide__track class. This was used to fix the main hero slider on Riverview Bank 2022.
Fix #2
For sliders that have multiple slides potentially visible, and the solution above does not work, place this within the code for the slider:
.splide__sr {
display: none!important;
}
This was used to fix the icon slider on Farmers State Bank Northwood 2022.
Grid Sliders Not Working
If you have a slider that should have multiple slides showing at a time, but it just won’t work, you can see this page for how to set up a grid slider.
Play Button Not Showing Up
PurgeCSS likes to keep us on our toes. The play/pause button of a Splide slider may appear to be working just fine when you’re building a new site locally, but when you push to UAT, it breaks. Ostensibly the /splide/ piece within the greedy section should cover this, but for whatever reason, it doesn’t. So, adding the class playing to the specific list of safelisted classes in your gulpfile.js (might start around line 412) should do it. Make sure to reinstall NPM and re-run gulp after doing that!
Tags: splide, slider, BS5, javascript, js, scss, sass