Drupal11/jquery4 breaks slick-slider with random order

Created on 1 September 2025, about 1 month ago

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)

🐛 Bug report
Status

Active

Version

3.0

Component

JavaScript

Created by

🇨🇭Switzerland mullzk

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024