Version 5 Notes

[NaotoshiFujita]

New Features

• (Maybe) Breakpoints should support non-overflow options
• Add an option to determine whether to activate the closest slide after drag for thumbnail carousels
• Add an option to change the wheel axis
• Add jump method
• Add a method to get progress rate
• Support >> and << patterns
• (Maybe) Use IntersectionObserver to check visibility of slides

Breaking Changes

• Drop IE support (it has officially retired)
• Simplify the internal event system (Splide#off() requires a method to remove)
• Detach Wheel component from the core and make it extension

Dropping Features

• (Maybe) Remove the cover option (object-fit is enough nowadays)

Considerations

• Move utility methods to another package so that extensions can use them
• (Maybe) Optimize the calculation for the carousel position, based on autoWidth

Tasks

• Update the package json (utils)
• Update examples in some comments

[thefubon]

Hello. Please add support for ScrollBar as a separate element with the ability to customize it. And that it works in all browsers, such as Firefox and Safari. It is very difficult to find a slider with this ScrollBar support. It's a very useful add-on. Many users do not immediately understand how to scroll slides.

[wplit]

The main thing I see missing from Splide (or at least the thing I haven't yet a way to accomplish) is to be able to add transformations that are directly synced with the current position of the slider.

eg to make things like this - https://swiperjs.com/demos/240-effect-coverflow/core

or to make parallax effects etc.

With splide, we have the is-active,is-previous,is-next classes, but nothing I've found that can be used to change something per px dragged. So we lose the ability to be able to have the slides adapt as we drag, it only happens before the move or after it.

I'm aware Swiper is a much heavier library, and maybe this is why, but if there's a way to make it so we can take the value of the current position in real-time, that would open up so many possibilities.

[afrasiyabhaider]

Please add a form validation option (could be native HTML e.g required) before moving to the next step and prevent the user if there's any error in the form

Example

https://codepen.io/wavilap/pen/MXrjQP

onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },

[hudri]

Make all class names for the slider structure fully configurable, including CLASS_TRACK, CLASS_LIST and CLASS_SLIDE. Ideally any string suitable for as selector for a document.querySelector() should be allowed.

When dealing with content coming from a 3rd party framework or editorial content from a database, you sometimes do not have full control over the HTML structure.

Use cases might be something like

const slider = new Splide('.content-from-wysiwyg-editor', {
  trackSelector: '.content-from-wysiwyg-editor > div', 
  listSelector:  '.content-from-wysiwyg-editor > div' > div', 
  slideSelector:  'blockquote.customer-review',
}).mount();

or you might simply have a SSR template language like PHP's Twig

<div class="splide">
  <div class="splide__track">
    <div class="splide__list">
      <!-- whatever is rendered here is not maintained by the frontend dev, not possible to add class names to individual slides -->
      {{ many_slides }}
    <div>
  </div>
</div>
<script>
const slider = new Splide('.splide', {
  slideSelector:  '.custom-slide-classname',
}).mount();
</script>