Fade slider type not working when using Data Attributes

[MathieuAlphamosa]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v3.6.12

Description

Fade is working correctly when initialized with JS, it's not working with Data Attributes.
It's seems to be working with Splide 2.4.x, and broken since 3.1.x at least.

Reproduction Link

https://jsfiddle.net/2kmb85nh/6/

Steps to Reproduce

none

Expected Behaviour

Fade slider initialized by using Data Attributes should work.

[mcfarlandonline]

We're experiencing a similar issue with version 3.6.12 and this setup:

<div class="nr-splideshow nr-splideshow-home splide" data-splide='{
		"type": "fade",
		"rewind": true,
		"pagination": true,
		"pauseOnHover": false,
		"pauseOnFocus": true,
		"keyboard": true,
		"lazyLoad": "nearby",
		"autoplay": true,
		"interval": 8000,
		"speed": 4000
	}'>

And since we have multiple running on one page...

// initialize splide v3 carousel/slideshow
var elms = document.getElementsByClassName( 'splide' );
for ( var i = 0; i < elms.length; i++ ) {
new Splide( elms[ i ] ).mount();
}

[AdsonCicilioti]

Same problem here!

Thanks for nice Slide lib!

[AdsonCicilioti]

My workarround:

I'm outputting the options as a property object coming from a custom controls interface, transforming them into JSON (JSON.stringify()). So the solution I gave was to change the attribute name to data-slider (for now) and in my init script revert it to a JavaScript object.

"use-strict";

document.addEventListener(
	"DOMContentLoaded",
	function () {
		var spliders = document.querySelectorAll(".splide");
		console.log(spliders);

		for (let i = 0; i < spliders.length; i++) {
			const el = spliders[i];
			// MY HACK BELOW
			const options = JSON.parse(el.getAttribute("data-slider"));
			new Splide(el, options).mount();
		}
	},
	false
);

[AdsonCicilioti]

Maybe this helps the author for fix this bug. 👍

[NaotoshiFujita]

Fixed in v4.0.0

[HendrikWismans]

Thanks! Works again in v4.