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