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"
        }
      }
    }
  ]