Expand the classes option

[Egpereira]

Hello!

Is there any chance we could have more class options to pass down to classes?

Today, we can extend the arrows and pagination elements with css classes, but we can't pass down classes to other parts of the slider like the track or root elements.

Example:
In my project, my slider needs to have the following layout

Which can only be achieved at the moment by directly overriding splide__track's overflow property to visible on my CSS. It would be interesting if we could alter those elements the same way we do with arrows and pagination.

Thanks for the great component!

[NaotoshiFujita]

The classes option is mainly for assigning custom classes of dynamic contents, such as pagination.
But you can add your classes thorough the Elements component that contains all essential elements.
https://splidejs.com/components/elements/

useEffect( () => {
  if ( ref.current ) {
    const { root, track, list } = ref.current.splide.Components.Elements;
    
    // root element
    root.classList.add( 'your-class' );

    // track element
    track.classList.add( 'your-class' );

    // list element
    list.classList.add( 'your-class' );
  }
} );

However, modifying styles of core elements may break your slider. Please be careful!

[Egpereira]

Thanks for the reply and suggestion!