Using Flickity with React — Onur Şuyalçınkaya

Home1 Writing2 Journey3 Stack4 Workspace5 Bookmarks6

Online

X (Twitter) GitHub LinkedIn Medium Instagram Soundcloud YouTube Bluesky Read.cv Pinterest

Writing

Almanya'dan Hollanda'ya taşındımOctober 06, 2023 Optimizing Website Speed with Preload, Prefetch, Preconnect, and DNS PrefetchDecember 04, 2022 Almanya'da 2 yılOctober 06, 2022 2020 — Year in reviewDecember 30, 2020 Bir yazılımcı olarak Türkiye’den gitmekNovember 24, 2020 Phone setupMay 28, 2020 useFetch: A Custom React HookMay 24, 2020 Using HTML5 video with canvasJanuary 31, 2020 Understanding “React.memo”January 20, 2020 What I've learned from working with HTML5 video over a monthJanuary 07, 2020 You may not need a carousel at least for mobile browsersDecember 27, 2019 Removing array duplicates in ES6January 25, 2019 Converting 10-digit timestamp to dateJanuary 24, 2019 Using Flickity with ReactNovember 06, 2018 Using Tailwind CSS with Gatsby.jsMay 06, 2018

Using Flickity with React

November 06, 2018

I love using Flickity, it’s great and super easy to use. But… When I started to work with React and need Flickity, things got pretty confusing. So I started to look for a component style library but find nothing effective. And built mine…

Step 1: Install flickity

To install the plugin, use your favorite package manager.

Step 2: Create a file called Slider.js

This file will contain Flickity configurations. You can of course name it as you want but be careful with naming component name and then importing also.

Voilà! You’ve made it! 😍

Step 3: Using in a component

Thanks for reading! 💛