v2.5.2
Giriş yap

swiper.js kullanan var mı? responsive hakkında sorum var

g4rymckinn0n
604 defa görüntülendi

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ı.

g4rymckinn0n
1150 gün önce

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
          },
        },
JavaScript