Karuzela Slick, problem z wysokością

Karuzela Slick, problem z wysokością 1

Karuzele Slick wykorzystuje w projektach, w których używam jeszcze jQuery. Jest dość elastyczna i posiada wiele opcji do konfiguracji. Nie potrzebuje wiele czasu na zainicjowanie i w łatwy sposób mogę stylować animacje przejścia pomiędzy slajdami.

Niedawno jednak napotkałem na drobny problem. Gdy karuzela znalazła się w zwiniętym akordeonie Bootstrapa nie potrafiła dostosować swojej wysokości oraz szerokości slajdów.

Rozwiązanie

Wykorzystałem wbudowane nasłuchiwanie eventów w collapse bootstrapa.

  1. Event ‚shown.bs.collapse’ wykonuje się zara po animacji rozwijania się panelu. W tym momencie element akordeonu ma już swoją „widoczną” szerokość i wysokość.
  2. Teraz wystarczy tylko rozkazać karuzeli slick, żeby pobrała nową wysokość wykorzystując:
$('.panel-collapse').on('shown.bs.collapse',  () => {
$('.slider').slick('setPosition');
})