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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
mahmutxd07

mahmutxd07

Decipat
Katılım
4 Kasım 2022
Mesajlar
1.122
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
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ı.

1694646534755.png


@oynozan @RaSGooL hocalarım yardımcı olursanız sevinirim. Konuyu biraz geç açtım rahatsız ettiysem kusura bakmayın.
 
Son düzenleyen: Moderatör:
Tarihe göre sırala Puana göre sırala
Kxaan dedi:
Bu kütüphaneyi kullanabilirsin.

Home | React Slick

The Last React Carousel You'll Ever Need!
react-slick.neostack.com
Genişletmek için tıkla...

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.
 
Artı 0 Eksi
mahmutxd07 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.
Genişletmek için tıkla...
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.
 
Son düzenleme:
Artı 0 Eksi
mahmutxd07 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.
Genişletmek için tıkla...
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.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...

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.

1694707526951.png


codesandbox.io

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.
 
Son düzenleme:
Artı 0 Eksi
mahmutxd07 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

codesandbox.io

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.
Genişletmek için tıkla...
afterChange eventini kullanabilirsiniz React Slick için. Sizin için düzenledim, buyrun.
codesandbox.io

ecstatic-lake-kj9jhv - CodeSandbox

ecstatic-lake-kj9jhv using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel
codesandbox.io
 
Artı 0 Eksi
mahmutxd07 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

codesandbox.io

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.
Genişletmek için tıkla...
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.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...

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

Kxaan dedi:
afterChange Event'ini kullanabilirsiniz React Slick için. Sizin için düzenledim, buyurun.
codesandbox.io

ecstatic-lake-kj9jhv - CodeSandbox

ecstatic-lake-kj9jhv using loader-utils, react, react-dom, react-scripts, react-slick, slick-carousel
codesandbox.io
Genişletmek için tıkla...

Hocam çok sağ olun Bu olay için 3-4 saat harcamıştım.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
onEdge sadece draggable: true şeklinde ayarlıyken son slide'ın ötesine draglamaya çalışıldığında çağrılıyor. Butonlar ile olmuyor.

mahmutxd07 dedi:
Hocam vallahi slick öyle ki, CSS yazılmıyor. Sağ ve sol butonları beyaz yapmışlar transparan. CSS yoluyla değiştiremiyorum.
Genişletmek için tıkla...
Bu kısma göz atın isterseniz.
 
Artı 0 Eksi

Benzer konular

Mucosoft
  • Soru
Before/After slider nasıl yapılır?
Mesaj
1
Görüntüleme
592
pottie4r
pottie4r
mahmutxd07
  • Çözüldü
Çözüldü  React ile Sayfayı bölme işlemi nasıl yapılır?
Mesaj
8
Görüntüleme
504
RaSGooL
RaSGooL
mahmutxd07
React ile state içinde veri olup olmadığı kontrolü nasıl yapılır?
Mesaj
5
Görüntüleme
302
oynozan
oynozan
Jibijeb
React ile bir sayfadaki bilgiler kullanarak yeni sayfa oluşturma nasıl yapılır?
Mesaj
3
Görüntüleme
1B
qelos
qelos
razordev
React ile web sitesi yapılır mı?
Mesaj
1
Görüntüleme
1B
Ecmel
Ecmel

Yeni konular

Yeni mesajlar

Geri
Yukarı