Problem/Motivation
Using slick with Drupal 11.2/Jquery4 and random slide order leads to Javascript-Error, preventing any slides to show up.
The Javascript-Error is:
drupal.js?v=11.2.3:64 Uncaught TypeError: a.children(...).sort is not a function
at i (slick.load.min.js?v=11.2.3:1:1690)
Steps to reproduce
Old, working installation:
- drupal: 10.5.2
- drupal/slick: 3.0.4
- npm-asset/slick-carousel: 1.6.0
- Slick-Configuration with option 'randomize' set to true
- A content-type with an image-field (unlimited number of values), displayed with 'Slick Image'. Formatter Options: 'Skin main' = 'Full Screen' and 'Optionset Main set to the configuration above. Everything else per default
=> Everything works fine. Slider is shown as expected, order of the images is random.
Breaking Installation:
- drupal: Upgrade to 11.2.3
- drupal/slick: still 3.0.4
- npm-asset/slick-carousel: still 1.6.0, patched according to
https://www.drupal.org/project/slick/issues/3467129
📌
Incompatibility with Drupal 11/jQuery 4
Fixed
=> On Pages where the image field is empty: Everything ok, browser reports no error.
=> On Pages where the image field has one image: Everything ok, image is shown, browser reports no error.
=> On Pages where the image field has multiple images: No image is shown, chrome reports in the Javascript-Console:
Uncaught TypeError: a.children(...).sort is not a function
at i (slick.load.min.js?v=11.2.3:1:1690)
at L.init.hn (dblazy.min.js?t1wily:1:3262)
at L.init.once (blazy.once.min.js?t1wily:1:243)
at Object.attach (slick.load.min.js?v=11.2.3:1:3408)
at drupal.js?v=11.2.3:166:24
at Array.forEach (<anonymous>)
at Drupal.attachBehaviors (drupal.js?v=11.2.3:162:34)
at drupal.init.js?v=11.2.3:32:12
at HTMLDocument.listener (drupal.init.js?v=11.2.3:20:7)
This makes sense, as sort was removed with jquery4:
https://github.com/jquery/jquery-migrate/issues/473
Proposed resolution
The problem lies in slick.load.js:199ff
function randomize() {
t.children().sort(function () {
return 0.5 - Math.random();
})
.each(function () {
t.append(this);
});
}
It should work out with the following code (untested)
var children = t.children().get().sort(function() {
return 0.5 - Math.random();
});
t.append(children);
Or in the minified code, replace:
a.children().sort(function(){return.5-Math.random()}).each(function(){a.append(this)}),f
with
a.append(a.children().get().sort(function(){return.5-Math.random()}))
(tested, works in my installation)