v2.5.2
Giriş yap

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

g4rymckinn0n
545 defa görüntülendi
2

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

css html javascript
Cevap yaz
Cevaplar (2)
g4rymckinn0n
1034 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
          },
        },
0
#009041
rotaile
1037 gün önce

merhaba bende bootstrap 5 ile kullanmıştım, sana örnek birkaç kod atayım oradan yardım alarak yapabilirsin.

web => https://prnt.sc/r_jjV-ecYetO
mobil => https://prnt.sc/WVNz2NItH0Bh

<!-- swiper -->
<section id="swiper">

<div class="container">
    <div class="col-12">
        <div class="row pb-3">
            <!-- Slider main container -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide slide1">
                        <div class="card border-0">
                            <div class="card-header bg-sw comment-title">
                                @kullaniciadi
                            </div>
                            <div class="card-body bg-sw">
                                <h5 class="card-title comment-user">Yorum başlığı</h5>
                                <p class="card-text comment">
                                    burası kullanıcının yapmış olduğu bir yorum 1
                                </p>
                                <a href="#" class="btn btn-outline-light">
                                    02.02.2022
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide slide2">
                        <div class="card border-0">
                            <div class="card-header bg-sw comment-title">
                                @kullaniciadi
                            </div>
                            <div class="card-body bg-sw">
                                <h5 class="card-title comment-user">Yorum başlığı</h5>
                                <p class="card-text comment">
                                    burası kullanıcının yapmış olduğu bir yorum 2
                                </p>
                                <a href="#" class="btn btn-outline-light">
                                    02.02.2022
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>

        </div>
    </div>
</div>

</section>
<!-- swiper -->

<script>

var swiper = new Swiper(".swiper", {
    slidesPerView: "auto",
    centeredSlides: true,
    spaceBetween: 5,
    loop: true,
    grabCursor: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        dynamicBullets: true,
    },
});

</script>

html ve js yapısı şu şekilde

1
#009008