swiper.js kullanan var mı? responsive hakkında sorum var
merhaba,
swiper.js ile bir slider ekledim. masaüstü tam genişlikte 5 adet yan yana görsel gösteriyorum. bu görseller otomatik kayıyor.
ekranı biraz daha küçültünce 5 görsel de küçülüyor. 4 olmuyor.
daha fazla küçüktünce daha fazla küçülüyor. slider genel olarak küçülüyor yani tek tek eksilmiyor.
ben ekran küçüldükçe column ölçeklendirir gibi ölçeklendirmek istiyorum. bunu nasıl yapabilirim?
bootstrap 5.0 ile birlikte kullanıyorum.
aslında özetle swiper js ile oluşturulmuş bir resim kaydırıcıyı nasıl responsive hale getirebilirim?
mobilde şöyle görünüyor: http://prntscr.com/FDXqPvKVd_19
ilgili column için size ayarları yaptım tüm divlerde tüm alanlarda koca sitede her yerde responsive sorunsuz şuan. sadece bu kısmı kaldı.
responsive için bir yöntem buldum. xs ve sm de 1 görsel, md içinde 2 görsel, daha üstünde 3 ve sırası ile 4, 5 görsel gösteriyorum.
js koduna ekleme yapıp kendi projenize göre düzenleyebilirsiniz:
breakpoints: {
// ve daha altındaki ekranlar için >= 320px
320: {
slidesPerView: 1,
spaceBetween: -15
},
// ve daha altındaki ekranlar için >= 480px
480: {
slidesPerView: 1,
spaceBetween: -15
},
// ve daha altındaki ekranlar için >= 640px
600: {
slidesPerView: 1,
spaceBetween: -15
},
// ve daha altındaki ekranlar için >= 720px
720: {
slidesPerView: 2,
spaceBetween: -15
},
// ve daha altındaki ekranlar için >= 1280px
1280: {
slidesPerView: 3,
spaceBetween: -15
},
// ve daha altındaki ekranlar için >= 1440px
1440: {
slidesPerView: 4,
spaceBetween: -15
},
// ve daha altındaki ekranlar için >= 1650px
1650: {
slidesPerView: 5,
spaceBetween: -15
},
},