スマホ用として、画面をせばめても、画像周りの余白をキープできるようにしたいです。
JavaScriptでスライダーを作成しました。
PCで見るのにはいいのですが、スマホ用として画面の幅をせばめると、画像周りの余白がなくなり、画像もせばまって表示されてしまいます。
【html】
<!-- スライダー --><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 9.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 10.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 11.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 12.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 13.jpg" alt=""> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- スライダー -->
【css】
.swiper-container {
width: 100%;
margin: 20px auto;
}
.swiper-slide-container {
text-align: center;
font-size: 18px;
background: #fff;
margin: auto;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide-img {
min-width: 322px;
}
【JavaScript】
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 4,
centeredSlides: true,
paginationClickable: true,
loop: true,
spaceBetween: 30,
slideToClickedSlide: true,
autoplay: { delay: 5000, disableOnInteraction: true, }, });
【試したこと】
画像(クラス名.swiper-slide-img)の周りにpaddingや、marginで余白を作ってみたのですが反映されませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/11 04:42
2021/05/11 04:44