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
=> 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)
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | Screenshot_20250929-070718.jpg | 509.38 KB | gausarts |
| #13 | Screenshot_20250929-070902.jpg | 322.44 KB | gausarts |
| #13 | Screenshot_20250908-194714.jpg | 300.08 KB | gausarts |
| #13 | Screenshot_20250908-194111.jpg | 309.24 KB | gausarts |
| #13 | Screenshot_20250908-192354.jpg | 479.5 KB | gausarts |
Issue fork slick-3544178
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
gausarts commentedThank you for quality post.
Patches are welcome. Feel free to use online JS compressor, normally better and more compact than editor compressors.
Comment #3
sourabhsisodia_ commentedComment #5
sourabhsisodia_ commentedComment #6
gausarts commented@mullzk, does the patch work?
Thanks.
Comment #7
mullzk commented@sourabhsisodia_ , @gausarts
Thank you both for your fast reaction and sorry for my late reply.
The patch works and fixes my issue. Thank you very much.
Comment #8
gausarts commentedNo worries :)
However I couldn't find the Merge button which was normally there.
I seem to lose the Push access, even after clicking the Get access button and a reload.
Might be the latest Drupal thread glitch.
I'll come back sometime later, hopefully the Merge button appears again.
Comment #9
gausarts commentedLet's see if RTBC make the button appear. If not, I'll need to search for DO issues with this UI change.
Comment #10
sourabhsisodia_ commentedThanks @gausarts for the RTBC, was merge button problem resolved ?
Comment #11
gausarts commentedStill no Merge button.
BTW, does the patch still work for D10?
Comment #12
sourabhsisodia_ commentedyess patch works fine for both drupal 10 and 11
Comment #13
gausarts commentedLooks like thread UI is still changing. The Merge button was there, then gone, then replaced by a link leading to a page, yet with no Merge button.
There must be docs for this new UI workflows, but can't find it yet.
Still looking for the correct keywords to search for this type of UI changes. No joy.
If you find the relevant instructions to merge, please share.
If UI is still mysterious, I might need to use CI later whenever I get a chance.
Just an FYI.
Comment #15
gausarts commentedThank you all for contribution.