Content is visually hidden when unslick mode is applied

Created on 28 June 2024, 9 months ago
Updated 25 August 2024, 8 months ago

Problem/Motivation

I need a slider on mobile and don't need it on desktop, so I use unslick. The problem is that the module works perfectly on mobile, but for the desktop the content is visually hidden.
I found out that it happens because the module doesn't add class "unslick". And perhaph it's because $settings['unslick'] == false is in the function preRenderSlickWrapper(), but in my .yml file unslick == true.
I use drupal/slick v3.0.2 and slick library v1.6

Steps to reproduce

Install drupal/slick and slick library. Create new optionset, add breakpoint and check "unslick".

💬 Support request
Status

Fixed

Version

3.0

Component

Documentation

Created by

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

Comments & Activities

  • Issue created by @vigorshochke
  • Status changed to Postponed: needs info 9 months ago
  • 🇮🇩Indonesia gausarts

    Thank you.

    Not sure, but sounds uncommon. Normally you disable carousels at mobile, not vice versa :)

    Try at least 2 or 3 breakpoints, says 0 or 321 depending on mobileFirst, then 769, 1025, etc.

    And play with mobileFirst option which implies min or max device width.

    Let me know?

  • 🇮🇩Indonesia gausarts

    > because the module doesn't add class "unslick". And perhaph it's because $settings['unslick'] == false is in the function preRenderSlickWrapper(), but in my .yml file unslick == true.
    You are correct in this regard.

    Let's clarify this a bit. It is just about misunderstanding between unslick in PHP/YML and the one in JS as found in the Responsive display options.

    As you know PHP/YML is not a "dynamic" language like JS. Unlike JS, PHP is not aware of the current device width, unless you install some other module or PHP libraries which detects it, but still useless since Slick PHP is not aware of it, anyway.

    So to be clear:

    • In PHP/YML, unslick as settings or CSS class is only defined if the amount of slides is one. Everything is destroyed, slide markups are removed here.
    • In JS, unslick in Responsive display option is managed by the JS library, and doesn't add the unslick CSS class. The markups are intact. Just be aware that once unslick it is destroyed as a slider, but not the slide markups. This is mentioned as a soft destroy as opposed to PHP markup removal.
  • Status changed to Fixed 8 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024