Incompatibility with Drupal 11/jQuery 4

Thank you.

Thank you for contribution.

Automatically closed - issue fixed for 2 weeks with no activity.

I have a new installation using Drupal 11.0.4.
I cannot get this to work.

I use Slick Carousel 3.0.3 on a few Drupal 10 sites with no problem.
This is a Drupal 11 specific problem.

have the same problem on drupal 11 with slick :(

Update: I have resolved the issue with Slick Carousel in Drupal 11.

The problem was due to the use of $.type() in the slick.js file, which is no longer supported in jQuery 4 used by Drupal 11. To fix this, I replaced all instances of $.type() with appropriate native JavaScript methods.

Here are the specific changes I made in /libraries/slick-carousel/slick/slick.js:

1. Replace $.type() when checking for an array:

   Before:

   if ( $.type(responsiveSettings) === 'array' && responsiveSettings.length ) {

   After:

   if ( Array.isArray(responsiveSettings) && responsiveSettings.length ) {

2. Replace $.type() when checking for an object:

   Before:

   if( $.type( arguments[0] ) === 'object' ) {

   After:

   if ( typeof arguments[0] === 'object' && arguments[0] !== null && !Array.isArray(arguments[0]) ) {

3. Replace $.type() when checking for a string:

   Before:

   else if ( $.type( arguments[0] ) === 'string' ) {

   After:

   else if ( typeof arguments[0] === 'string' ) {

4. Replace $.type() when checking if an argument is an array:

   Before:

   if ( arguments[0] === 'responsive' && $.type( arguments[1] ) === 'array' ) {

   After:

   if ( arguments[0] === 'responsive' && Array.isArray( arguments[1] ) ) {

5. Replace $.type() when ensuring a property is not an array:

   Before:

   if( $.type( _.options.responsive ) !== 'array' ) {

   After:

   if ( !Array.isArray( _.options.responsive ) ) {

After making these changes, I minified the updated slick.js file using UglifyJS to create a new slick.min.js. I replaced the old slick.min.js with this new one.

Once these steps were completed, the slider started working correctly again!

Note: I have double-checked all the code snippets to ensure they match exactly what I provided earlier.

#8 is good. Thanks terminator727. I applied the same tricks and Slick is working properly in Drupal 11 and JQuery 4.

Sadly, the CSS change associated with this issue from commit 299772e4 is having unintended consequences on my theme.

We have code like this:

  .view-events-today .view-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }

But do to the extensive and generic overqualified CSS provided by this module, our display: flex is overridden with a .block .view .view-content { display: block; }. Why was this change made?

- /* Fix for unnecessary Olivero Grid surprises causing Slick excessive height. */
- div[class*="view-slick"],
- div[class*="view-slick"] .view-content,
- div[class*="view-blazy"],
- div[class*="view-blazy"] .view-content {
+ /* Fix for unnecessary Olivero Grid surprises causing Slick excessive width. */
+ .view,
+ .view .view-content,
+ .block .view,
+ .block .view .view-content {
  display: block;
}

It seems like there must be a better way to scope this to fix something specifically for the Olivero theme.

I've created a follow-up 🐛 Overqualified CSS to fix Slick Views on Olivero theme breaks any theme and any view Active .

#8 is very helpful. thank you!

I forked the Slick Github project to apply the jQuery 3+ deprecations fixes found here.

And then added this in my composer.json:

  "require": {
    ...
    "npm-asset/slick-carousel": "^1.8"
  },
  "repositories": [
    ...
    {
      "type": "package",
      "package": {
        "name": "npm-asset/slick-carousel",
        "version": "1.8.2",
        "type": "drupal-library",
        "source": {
          "url": "https://github.com/mably/slick.git",
          "type": "git",
          "reference": "topic/jquery4"
        }
      }
    }
  ]

Thanks #8

I attached modified slick.js

I tried >10 online compressors and every time I got

Uncaught SyntaxError: expected expression, got '&'

Who can share working slick.min.js ?

Ivnish, your version on #14 is working for me. I didn't see any JS errors.

@jay.chen this is not minified version. I speak about minified

This is minified code, and after change file, should clear cache of browser too.

@trydoknight, thanks, I will test it later

@trydoknight, I tested your slick.min.js and it doesn't work for me in Drupal 11. No errors in js console and slider doesn't work too

If someone needs a patched 1.6.0.

Same as #20
Tested with the attached files but it doesn't work for me in Drupal 11 (installed via Drupal cms).
No errors in js console and slider doesn't work too.

Nothing works on Drupal 11 white screen. After trying all the documents it doesn't work

#8 is good. I'm going to create a patch to have it in the community

#26 is good, I'm also going to enter the changes to slick.min.js because otherwise it wouldn't work for me!

Patch #27 works perfectly, thank you

@gausarts just wanted to let you know that kenwheeler seems to have made a commit 5 days ago at https://github.com/kenwheeler/slick

Maybe you could try contacting him about this and maybe something like a co-maintainership for the project?

@anybody, thank you.
The commit has nothing to do with the issue, CMIIW:
https://github.com/kenwheeler/slick/commit/b17846511cabf4572c696238a8765...

This module had fixed that type of issue since the first release 10 years ago as long as you allow the module to do the fixes for you via it's options:
https://git.drupalcode.org/project/slick/-/blob/7.x-2.0-alpha1/css/theme...

Anyway, please see the project home Broken vs working library versions. There are two fundamental issues mentioned:

• Default value of rows causing broken displays, etc.
• D11 issue as the OP reported.

Without addressing both, we'd better stick to working versions with solutions by having strictly supported versions and the other as proposed above by our good fellas of Drupal.

About co-maintainership, etc., I would better leave it to their best priority, and your minor efforts as provided-above on this particular issue. Unless somebody is willing to pay my time, of course :)

Thank you.

Thank you for the quick and extensive feedback @gausarts! Sorry I got that wrong and thanks for the explanations!

I created a module that implements many of the jQuery Deprecated functions/objects/constants that are not included in jQuery 4, maybe this can be useful to fix some of the issues here:

https://www.drupal.org/project/jquery_deprecated_functions →