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