{"id":33928,"date":"2025-11-08T23:40:57","date_gmt":"2025-11-08T20:40:57","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33928"},"modified":"2025-11-08T23:40:57","modified_gmt":"2025-11-08T20:40:57","slug":"vue-js-ile-netflix-benzeri-kaydirma-bilesenleri-swipers-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-netflix-benzeri-kaydirma-bilesenleri-swipers-nasil-olusturulur\/","title":{"rendered":"Vue.js ile Netflix Benzeri Kayd\u0131rma Bile\u015fenleri (Swipers) Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"

<\/p>\n

Vue.js ile Netflix Benzeri Kayd\u0131rma Bile\u015fenleri (Swipers) Nas\u0131l Olu\u015fturulur?<\/h2>\n
Netflix, modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren, g\u00f6rsel olarak \u00e7ekici ve etkile\u015fimli aray\u00fczlerin \u00f6nc\u00fclerinden biridir. \u00d6zellikle ana sayfas\u0131ndaki yatay kayd\u0131rma listeleri, kullan\u0131c\u0131lara geni\u015f i\u00e7erik yelpazesini ke\u015ffetme imkan\u0131 sunarken, ayn\u0131 zamanda d\u00fczenli ve estetik bir g\u00f6r\u00fcn\u00fcm sa\u011flar. Bu t\u00fcr “swiper” veya “carousel” bile\u015fenleri, e-ticaret sitelerinden haber portallar\u0131na kadar bir\u00e7ok platformda \u00fcr\u00fcnleri, makaleleri veya di\u011fer \u00f6\u011feleri sergilemek i\u00e7in vazge\u00e7ilmez hale gelmi\u015ftir. Bu makalede, Vue.js kullanarak Netflix benzeri, \u00f6zelle\u015ftirilebilir ve performansl\u0131 kayd\u0131rma bile\u015fenlerini ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Hem temel bir yap\u0131y\u0131 s\u0131f\u0131rdan in\u015fa edecek hem de ileri d\u00fczey \u00f6zellikler, performans optimizasyonlar\u0131 ve eri\u015filebilirlik ipu\u00e7lar\u0131 hakk\u0131nda bilgi verece\u011fiz.<\/p>\n

Giri\u015f: Neden Netflix Tarz\u0131 Swiper’lar ve Vue.js?<\/h3>\n
Netflix’in kayd\u0131rma bile\u015fenleri, kullan\u0131c\u0131n\u0131n dikkatini \u00e7ekme, i\u00e7erik ke\u015ffini kolayla\u015ft\u0131rma ve s\u0131n\u0131rl\u0131 ekran alan\u0131nda zengin veri sunma konusunda olduk\u00e7a ba\u015far\u0131l\u0131d\u0131r. Bu bile\u015fenler sayesinde kullan\u0131c\u0131lar, sayfay\u0131 dikey olarak kayd\u0131rmadan, ilgilendikleri kategori veya koleksiyon i\u00e7indeki di\u011fer \u00f6\u011felere yatay olarak g\u00f6z atabilirler. Bu, \u00f6zellikle mobil cihazlarda ekran alan\u0131n\u0131n k\u0131s\u0131tl\u0131 oldu\u011fu durumlarda hayati \u00f6nem ta\u015f\u0131r. G\u00f6rsel olarak \u00e7ekici animasyonlar ve sezgisel navigasyon, kullan\u0131c\u0131lar\u0131n uygulamayla daha fazla etkile\u015fim kurmas\u0131n\u0131 sa\u011flar.<\/p>\n
Peki neden Vue.js? Vue.js, progresif bir JavaScript \u00e7er\u00e7evesidir; yani k\u00fc\u00e7\u00fck bir etkile\u015fimli bile\u015fen eklemek i\u00e7in de, b\u00fcy\u00fck \u00f6l\u00e7ekli tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirmek i\u00e7in de kullan\u0131labilir. Bile\u015fen tabanl\u0131 mimarisi, reaktif veri ba\u011flama yetenekleri ve anla\u015f\u0131l\u0131r s\u00f6zdizimi sayesinde karma\u015f\u0131k UI bile\u015fenlerini geli\u015ftirmeyi olduk\u00e7a kolayla\u015ft\u0131r\u0131r. Performans odakl\u0131 yap\u0131s\u0131 ve geli\u015fen ekosistemi, Netflix tarz\u0131 kayd\u0131rma bile\u015fenleri gibi dinamik ve etkile\u015fimli \u00f6\u011feleri olu\u015fturmak i\u00e7in Vue.js’i m\u00fckemmel bir se\u00e7im haline getirir.<\/p>\n
Bu makalede, \u00f6ncelikle temel bir kayd\u0131rma bile\u015feninin anatomisini anlayacak, ard\u0131ndan Vue.js ile basit bir versiyonunu olu\u015fturacak ve son olarak navigasyon oklar\u0131, duyarl\u0131 tasar\u0131m, performans optimizasyonlar\u0131 ve s\u00fcr\u00fckle-b\u0131rak (drag-to-scroll) gibi geli\u015fmi\u015f \u00f6zelliklerle bile\u015fenimizi zenginle\u015ftirece\u011fiz. Ayr\u0131ca, \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin ne zaman kullan\u0131laca\u011f\u0131 ve pop\u00fcler alternatifler hakk\u0131nda da bilgi verece\u011fiz.<\/p>\n

Temel Konseptler ve Haz\u0131rl\u0131k<\/h3>\n
Netflix benzeri bir kayd\u0131rma bile\u015feni olu\u015fturmadan \u00f6nce, temel yap\u0131 ta\u015flar\u0131n\u0131 ve Vue.js projemizi nas\u0131l haz\u0131rlayaca\u011f\u0131m\u0131z\u0131 anlamam\u0131z gerekiyor.<\/p>\n

Kayd\u0131rma Bile\u015fenlerinin Anatomisi<\/h4>\n

Bir kayd\u0131rma bile\u015feni genellikle \u015fu \u00f6\u011felerden olu\u015fur:<\/p>\n

Kapsay\u0131c\u0131 (Container):<\/strong> T\u00fcm kayd\u0131rma bile\u015fenini saran ana element. Genellikle bir ba\u015fl\u0131k ve kayd\u0131r\u0131labilir i\u00e7eri\u011fi bar\u0131nd\u0131r\u0131r.<\/li>\n
Kayd\u0131rma Alan\u0131 (Scroller\/Wrapper):<\/strong> \u0130\u00e7indeki \u00f6\u011felerin yatay olarak d\u00fczenlendi\u011fi ve kayd\u0131r\u0131ld\u0131\u011f\u0131 alan. Bu alanda overflow-x: auto;<\/code> veya scroll;<\/code> gibi CSS \u00f6zellikleri kullan\u0131l\u0131r.<\/li>\n
\u00d6\u011feler (Items):<\/strong> Kayd\u0131r\u0131labilir listenin her bir eleman\u0131 (\u00f6rne\u011fin, bir film posteri, bir \u00fcr\u00fcn kart\u0131). Bu \u00f6\u011feler genellikle esnek kutu (flexbox) veya \u0131zgara (grid) d\u00fczeni ile yatay olarak s\u0131ralan\u0131r.<\/li>\n

Navigasyon Kontrolleri (Navigation Controls):<\/strong> Kullan\u0131c\u0131n\u0131n kayd\u0131rma alan\u0131n\u0131 manuel olarak hareket ettirmesini sa\u011flayan ok butonlar\u0131 (sol ve sa\u011f).<\/li>\n<\/ul>\nVue.js Projesi Olu\u015fturma<\/h4>\nYeni bir Vue.js projesi olu\u015fturmak i\u00e7in Vue CLI veya Vite kullanabilirsiniz. Vite, daha h\u0131zl\u0131 bir geli\u015ftirme deneyimi sundu\u011fu i\u00e7in genellikle tercih edilir.<\/p>\n \nVite ile yeni bir Vue projesi olu\u015fturma<\/h2>\nnpm create vue@latest\n\n Proje ad\u0131n\u0131 girin (\u00f6rn: netflix-swiper-app)<\/h2>\n Vue 3, TypeScript yok, JSX yok, Router yok, Pinia yok, Vitest yok, Cypress yok, ESLint yok se\u00e7ebilirsiniz.<\/h2>\n\ncd netflix-swiper-app\nnpm install\nnpm run dev\n<\/code><\/pre>\nBu komutlarla temel bir Vue 3 projesi olu\u015fturmu\u015f olacaks\u0131n\u0131z. \u015eimdi, src\/components<\/code> klas\u00f6r\u00fcnde yeni bir Vue bile\u015feni olu\u015fturmaya ba\u015flayabiliriz.<\/p>\n Basit Bir Kayd\u0131rma Bile\u015feni Olu\u015fturma<\/h3>\n\u0130lk ad\u0131m olarak, navigasyon oklar\u0131 olmadan sadece yatay olarak kayd\u0131r\u0131labilen bir \u00f6\u011fe listesi olu\u015fturaca\u011f\u0131z.<\/p>\n Veri Yap\u0131s\u0131<\/h4>\n\u00d6ncelikle, bile\u015fenimizin g\u00f6sterece\u011fi i\u00e7erik i\u00e7in \u00f6rnek bir veri yap\u0131s\u0131na ihtiyac\u0131m\u0131z var. Bu, genellikle bir dizi nesneden olu\u015fur:<\/p>\n \n\/\/ src\/components\/NetflixRow.vue\nimport { ref } from 'vue';\n\nconst movies = ref([\n { id: 1, title: 'Film 1', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+1' },\n { id: 2, title: 'Film 2', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+2' },\n { id: 3, title: 'Film 3', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+3' },\n { id: 4, title: 'Film 4', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+4' },\n { id: 5, title: 'Film 5', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+5' },\n { id: 6, title: 'Film 6', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+6' },\n { id: 7, title: 'Film 7', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+7' },\n { id: 8, title: 'Film 8', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+8' },\n { id: 9, title: 'Film 9', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+9' },\n { id: 10, title: 'Film 10', imageUrl: 'https:\/\/via.placeholder.com\/200x300?text=Film+10' },\n]);\n<\/code><\/pre>\nTemel HTML Yap\u0131s\u0131<\/h4>\n\u015eimdi, bu veriyi kullanarak temel bir HTML yap\u0131s\u0131 olu\u015ftural\u0131m. Bir ana kapsay\u0131c\u0131, i\u00e7inde kayd\u0131r\u0131labilir bir sarmalay\u0131c\u0131 ve v-for<\/code> d\u00f6ng\u00fcs\u00fcyle olu\u015fturulan film kartlar\u0131 olacak.<\/p>\n \n\n

Temel Konseptler ve Haz\u0131rl\u0131k<\/h3>\nNetflix benzeri bir kayd\u0131rma bile\u015feni olu\u015fturmadan \u00f6nce, temel yap\u0131 ta\u015flar\u0131n\u0131 ve Vue.js projemizi nas\u0131l haz\u0131rlayaca\u011f\u0131m\u0131z\u0131 anlamam\u0131z gerekiyor.<\/p>\n

Vite ile yeni bir Vue projesi olu\u015fturma<\/h2>\nnpm create vue@latest\n\n

Proje ad\u0131n\u0131 girin (\u00f6rn: netflix-swiper-app)<\/h2>\n

Temel Konseptler ve Haz\u0131rl\u0131k<\/h3>\n
Netflix benzeri bir kayd\u0131rma bile\u015feni olu\u015fturmadan \u00f6nce, temel yap\u0131 ta\u015flar\u0131n\u0131 ve Vue.js projemizi nas\u0131l haz\u0131rlayaca\u011f\u0131m\u0131z\u0131 anlamam\u0131z gerekiyor.<\/p>\n