Ten wpis to poradnik, ale i osobisty pamiętnik. Jako deweloper działający na rynku Webflow w Polsce, chcę dzielić się wiedzą. Dziś dobrze wiem i pamiętam jak wykonać Slider CMS, ale zdaję sobie sprawę, że za jakiś czas, gdybym nie musiał takowego budować, zapomnę o tym rozwiązaniu. Po to właśnie powstaje ten wpis – dla mnie i dla Ciebie.
Dlaczego standardowy slider Webflow nie wystarcza?
Slider jako natywne narzędzie Webflow jest bardzo wygodny. Można wrzucić tam dowolną treść i stylizować ją w zasadzie bez ograniczeń. Jednak każdy slajd trzeba dodać ręcznie.
Weźmy na przykład tą stronę dla Solid Water. Wymyśliliśmy z klientem, że jego produkty będą wyświetlane w postaci slidera na stronie głównej. Produktów miało docelowo powstać około dziesięciu.
Stworzyłem kolekcję produktów CMS. W planie miałem, aby listing zawierał zdjęcie, skróconą nazwę i przycisk wiodący do strony produktu. Przy próbie wrzucenia kolekcji (Collection List) do pojedynczego slajdu, działy się dziwne rzeczy: w każdym slajdzie wyświetlała się cała lista produktów.
Próba ograniczania kolekcji do jednego produktu na slajd mijała się z celem. Chodziło o skalowalność – aby każdy nowo dodany produkt automatycznie wpadał jako kolejny slajd.
Rozwiązanie: Finsweet
Poszperałem w internecie i z pomocą przyszedł mi Finsweet ze swoją biblioteką darmowych atrybutów. Oto proste rozwiązanie problemu CMS Slider.
Krok 1
Skopiuj poniższy kod i wklej go do sekcji <head>
(Site settings → Custom code → Head code)
<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>Krok 2
Zbuduj kolekcję źródłową, która ma być wyświetlana w postaci Slidera. Możesz ją umieścić gdziekolwiek na stronie, a nawet ukryć, nadając jej właściwość CSS display:none. Tak czy inaczej, będzie ona niewidoczna po opublikowaniu. Cała stylizacja CSS zostanie zachowana.
Krok 3
W ustawieniach źródłowej Collection List dodaj Custom Attributes
(Collection List → Settings → Custom Attributes)
Name: fs-cmsslider-element
Value: list
Krok 4
Dodaj na stronę standardowy komponent slider. Zostaw jego slajdy puste, ale skonfiguruj go według własnych potrzeb (paginację, strzałki, animacje, liczbę widocznych slajdów).
Krok 5
Nadaj Custom Attributes do docelowego Slidera
(Slider → Settings → Custom Attributes)
Name: fs-cmsslider-element
Value: slider
Krok 6
Opublikuj stronę i sprawdź efekt
Po wykonaniu tych kroków i opublikowaniu strony, dotychczas pusty slider wyświetla elementy ze źródłowej kolekcji. Oczywiście kolekcja źródłowa jest niewidoczna.
Jeśli zastanawiasz się nad własną stroną lub potrzebujesz pomocy przy bardziej złożonych projektach w Webflow, sprawdź mój cennik stron internetowych lub skontaktuj się ze mną bezpośrednio. Chętnie pomogę.
