Touch Slider czyli slider dla urządzeń mobilnych za pomocą samego CSSa

Jestem fanką minimalizmu i również podczas kodowania staram się używać technik prostych i optymalnych.

Jednym z modniejszych elementów na stronach internetowych jest slider – czyli blok z możliwością przewijania, umożliwiający zaoszczędzić sporą ilość miejsca. Typem slidera, z którego od jakiegoś czasu korzystam najczęściej jest Touch Slider pokazywany tylko na urządzeniach mobilnych. Służy on najczęściej do pokazywania wpisów lub galerii w jednym wierszu.

Największą zaletą Touch Slidera jest jego konstrukcja. Oparta jest tylko i wyłącznie o CSS, dzięki czemu działa na każdej przeglądarce mobilnej nie obciążając dodatkowo strony zbędnym JSem.

Kod jest konstrukcyjnie bardzo prosty. Składa się z pojedynczych slide’ów otoczonych dwoma divami o odpowiednim stylowaniu.

Cała konstrukcja oparta jest o display: flex i poziomy układ wszystkich slide’ów (inline-flex).

scroll-snap-type nie jest jeszcze zbyt popularnie obsługiwanym znacznikiem, ale w przeglądarkach, które mają w sobie jego obsługę możemy sprawić, że zawartość scrollowana będzie krokowo na podstawie podanej szerokości zarówno scroll-snap-points-x jak i width dla pojedynczego slide’u. Szerzej o scroll snappingu możecie dowiedzieć się tutaj.

Podczas stylowania pojedynczego slide’u warto tak zaplanować jego szerokość, aby kolejny slide delikatnie wystawał z prawej strony i z góry podpowiadał użytkownikowi, że scrollując z prawej do lewej zobaczymy więcej treści.

Tak wygląda główna struktura slidera, który świetnie sprawdza się na urządzeniach dotykowych. Wdrożyłam go już na kilku projektach, szczególnie tam gdzie obecna jest bardzo duża ilość wpisów i galerii.

Poniżej zamieszczam demo kodu wraz z przykładowym contentem.
Warto podejrzeć jego zachowanie na przeglądarce w telefonie:

See the Pen Touch Slider – pure SCSS by Agnieszka Palmowska (@Agressiva86) on CodePen.light

Tagi: code, css, flex, front-end, scss

Cześć, używam plików Cookies

Używam informacji zapisanych za pomocą cookies i podobnych technologii m.in. w celach statystycznych oraz w celu dostosowania strony do użytkowników. W programie służącym do obsługi internetu można zmienić ustawienia dotyczące cookies. Korzystanie z mojej strony bez zmiany ustawień dotyczących cookies oznacza, że będą one zapisane w pamięci urządzenia.

Ok, rozumiem Zobacz więcej