SSR with responsive fails

[milindsingh]

On mobile, the SSR content with 3 slides per page is rendered, which later changes to 1 with a flicker.

Anyone facing this?

[nbili]

same problem

[nbili]

use client-only run on client is work for me

[3em]

same problem, if put responsive to slickOptions, SSR breaks

any syggestions?

[zappu9x]

I got same problem too! After research, i found a solution (in my case) Responsive failed if there are least one of the parrents has attribue "display: flex" => Remove and change to other will fix the problem

[ma-jahn]

We've had Client Side Hydration Errors when using responsive in combination with infinite.

On the Server Side as well as on "Desktop" more child element are being rendered than on a smaller resolution. Therefore when accessing the page with a Smartphone the app ran into an Hydration Error.

We "fixed" it by setting infinite to false and extending our responsive config to set centerMode based on the resolution like so:

[
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          centerMode: false,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          centerMode: true,
        },
      },
    ]

[tcblaize]

This works for me as well <client-only>

[technogize]

Is there no SSR-friendly fix for this? Using <client-only> means the contents will not be there when the page initially loads. Not good for SEO.

[Iran-110]

I implemented a solution in this PR on my forked repo: vue-slick-carousel-rtl. Also works well with ltr mode.