Çözüldü React ile slider nasıl yapılır?

249873 · 14 Eylül 2023

Herkese selam.
Netflix vb sitelerde olan, bir kategori altındaki filmlerin 1 satırda listelenip kayması konusunu nasıl yapabilirim?
Bir de performans açısından site yüklenirken resimler yüklenmiyormuş. Sadece gördüğüm kısımlar için resim yüklenmesi yaparsak çok daha iyi olurmuş. Biraz araştırdım sanıyorum lazy load adında kütüphane ile yapılıyor. Ama bu SLI'de mantığını hiç yapamadım. Yardımcı olursanız fikir verirseniz çok sevinirim.
Bazı yerlerde de bu lazy Load'ın gereksiz olduğunu okumuştum. Resimler yüklüyor ama Opacity'sini 0 yapıp tekrar açıyor diyenler vardı.

@oynozan @RaSGooL hocalarım yardımcı olursanız sevinirim. Konuyu biraz geç açtım rahatsız ettiysem kusura bakmayın.

kaan.w · 14 Eylül 2023

Bu kütüphaneyi kullanabilirsin.

Home | React Slick

The Last React Carousel You'll Ever Need!

react-slick.neostack.com

kaan.w · 14 Eylül 2023

Bu kütüphaneyi kullanabilirsin.

Home | React Slick

The Last React Carousel You'll Ever Need!

react-slick.neostack.com

249873 · 14 Eylül 2023

kaan.w dedi:
Bu kütüphaneyi kullanabilirsin.

Home | React Slick

The Last React Carousel You'll Ever Need!

react-slick.neostack.com

Hocam çok sağolun işime yaradı teşekkürler.

Peki ben bunu kendim yapmak istersem nasıl yapabilirim?

Mülakatlarda veya şunu kendin yaz dediklerimde bir slider yapabileceğimi düşünmüyorum.

kaan.w · 14 Eylül 2023

Silinen üye dedi:
Hocam çok sağolun işime yaradı teşekkürler.

Peki ben bunu kendim yapmak istersem nasıl yapabilirim?

Mülakatlarda veya şunu kendin yaz dediklerimde bir slider yapabileceğimi düşünmüyorum.

Carousel olarak geçiyor bu dediğiniz. Google'dan react carousel example şeklinde aratıp Github'dan kütüphanelerin vs. kodlarını inceleyebilirsin.

Anlamadığınız yerlerde yardımcı oluruz. Konu açabilirsiniz.

oynozan · 14 Eylül 2023

Silinen üye dedi:
Hocam çok sağolun işime yaradı teşekkürler.

Peki ben bunu kendim yapmak istersem nasıl yapabilirim?

Mülakatlarda veya şunu kendin yaz dediklerimde bir slider yapabileceğimi düşünmüyorum.

Arkadaş güzel bir cevap vermiş zaten, react carousel şeklinde aratıp Codepen örneklerini inceleyebilirsiniz. Alternatif olarak Owl Carousel kütüphanesine de göz atabilirsiniz ben şahsen onu kullanıyorum.

249873 · 14 Eylül 2023

oynozan dedi:
Arkadaş güzel bir cevap vermiş zaten, react carousel şeklinde aratıp Codepen örneklerini inceleyebilirsiniz. Alternatif olarak Owl Carousel kütüphanesine de göz atabilirsiniz ben şahsen onu kullanıyorum.

Hocam peki bu carousel içinde gelen owl paketinde. Sağ ve sola kaydırma butonlarına nasıl müdahale edebilirim?

Slick ile biraz uğraştım. Çözemedim. Video izleyerek çözücem şuan biraz yoruldum. Eğer sizin paket kolaysa onada geçebilirim.

Yapmak istediğim, Son elemana geldiğinde next buton'u gözükmesin. İlk elemandaykende prev buton'u gözükmesin istiyorum.

great-worker-z3qtwh - CodeSandbox

great-worker-z3qtwh by hdogukanozkan using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel

codesandbox.io

Koda bakmak isterseniz. Tailwind bağlayamadığım için biraz fazla renksiz oldu. Beyaz kısımda kaldığı için butonlarda gözükmüyor. prev ve next olarak harici butonlar oluşturdum bunlara css olarak müdahale edebiliyorum çalışıyorda ama son elemana geldiğinde gözükmesin veya ilk elemandayken gözükmesin gibi müdahalelerde bulunamadım.

kaan.w · 14 Eylül 2023

Silinen üye dedi:
Hocam peki bu carousel içinde gelen owl paketinde. Sağ ve sola kaydırma butonlarına nasıl müdahale edebilirim?

Slick ile biraz uğraştım. Çözemedim. Video izleyerek çözücem şuan biraz yoruldum. Eğer sizin paket kolaysa onada geçebilirim.

Yapmak istediğim, Son elemana geldiğinde next buton'u gözükmesin. İlk elemandaykende prev buton'u gözükmesin istiyorum.

Eki Görüntüle 1943821

great-worker-z3qtwh - CodeSandbox

great-worker-z3qtwh by hdogukanozkan using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel

codesandbox.io

Koda bakmak isterseniz. Tailwind bağlayamadığım için biraz fazla renksiz oldu. Beyaz kısımda kaldığı için butonlarda gözükmüyor. prev ve next olarak harici butonlar oluşturdum bunlara css olarak müdahale edebiliyorum çalışıyorda ama son elemana geldiğinde gözükmesin veya ilk elemandayken gözükmesin gibi müdahalelerde bulunamadım.

afterChange eventini kullanabilirsiniz React Slick için. Sizin için düzenledim, buyrun.

ecstatic-lake-kj9jhv - CodeSandbox

ecstatic-lake-kj9jhv using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel

codesandbox.io

oynozan · 14 Eylül 2023

Silinen üye dedi:
Hocam peki bu carousel içinde gelen owl paketinde. Sağ ve sola kaydırma butonlarına nasıl müdahale edebilirim?

Slick ile biraz uğraştım. Çözemedim. Video izleyerek çözücem şuan biraz yoruldum. Eğer sizin paket kolaysa onada geçebilirim.

Yapmak istediğim, Son elemana geldiğinde next buton'u gözükmesin. İlk elemandaykende prev buton'u gözükmesin istiyorum.

Eki Görüntüle 1943821

great-worker-z3qtwh - CodeSandbox

great-worker-z3qtwh by hdogukanozkan using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel

codesandbox.io

Koda bakmak isterseniz. Tailwind bağlayamadığım için biraz fazla renksiz oldu. Beyaz kısımda kaldığı için butonlarda gözükmüyor. prev ve next olarak harici butonlar oluşturdum bunlara css olarak müdahale edebiliyorum çalışıyorda ama son elemana geldiğinde gözükmesin veya ilk elemandayken gözükmesin gibi müdahalelerde bulunamadım.

Hocam Slick dokümantasyonuna bir göz gezdirdim, en altta Events kısmı var. Kendim denemedim ama sanırım "edge" event'i sizin aradığınız şey. Carousel'in sonuna geldiğinizde CSS ile next butonunu display: none; yapabilirsiniz.

249873 · 14 Eylül 2023

oynozan dedi:
Hocam Slick dokümantasyonuna bir göz gezdirdim, en altta Events kısmı var. Kendim denemedim ama sanırım "Edge" Event'i sizin aradığınız şey. Carousel'in sonuna geldiğinizde CSS ile Next butonunu display: none; yapabilirsiniz.

Hocam vallahi slick öyle ki, CSS yazılmıyor. Sağ ve sol butonları beyaz yapmışlar transparan. CSS yoluyla değiştiremiyorum.

kaan.w dedi:
afterChange Event'ini kullanabilirsiniz React Slick için. Sizin için düzenledim, buyurun.

ecstatic-lake-kj9jhv - CodeSandbox

ecstatic-lake-kj9jhv using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel

codesandbox.io

Hocam çok sağ olun Bu olay için 3-4 saat harcamıştım.

kaan.w · 14 Eylül 2023

oynozan dedi:
Hocam Slick dokümantasyonuna bir göz gezdirdim, en altta Events kısmı var. Kendim denemedim ama sanırım "edge" event'i sizin aradığınız şey. Carousel'in sonuna geldiğinizde CSS ile next butonunu display: none; yapabilirsiniz.

onEdge sadece draggable: true şeklinde ayarlıyken son slide'ın ötesine draglamaya çalışıldığında çağrılıyor. Butonlar ile olmuyor.

Silinen üye dedi:
Hocam vallahi slick öyle ki, CSS yazılmıyor. Sağ ve sol butonları beyaz yapmışlar transparan. CSS yoluyla değiştiremiyorum.

Bu kısma göz atın isterseniz.

CustomArrows | React Slick

Çözüldü React ile slider nasıl yapılır?

Ayrıntılı düzenleme

249873

Kilopat

kaan.w

Home | React Slick

kaan.w

Megapat

Home | React Slick

249873

Kilopat

Home | React Slick

kaan.w

Megapat

oynozan

Megapat

249873

Kilopat

great-worker-z3qtwh - CodeSandbox

kaan.w

Megapat

great-worker-z3qtwh - CodeSandbox

ecstatic-lake-kj9jhv - CodeSandbox

oynozan

Megapat

great-worker-z3qtwh - CodeSandbox

249873

Kilopat

ecstatic-lake-kj9jhv - CodeSandbox

kaan.w

Megapat

Benzer konular