javascript - アイテム (固定幅 - swiper-slide) を適切に中央揃えするにはどうすればよいですか?

Question

スライドを の中央に配置しようとしていswiper-containerます。最終バージョンは、次の図のようになる必要があります。

SwiperJs - 最終バージョン (大、中、小の画面サイズ:)

すべてのページネーション ドットは自動的にカードと関連付けられる必要があります。

これを達成する方法がわかりません。カードが正しく中央に配置されません。

確かではありませんが、固定幅のためにセンタリングが機能しない可能性がありswiper-slideますか? スライドの幅を固定しないと、実際には適切に中央に配置されますが、もちろん、カードのデザインは「押しつぶされ」ます。

これが私のコードです：

Swiper-JS

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      spaceBetween: 0,
      centeredSlides: true,
      initialSlide: 2,
      // init: false,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      breakpoints: {
        0: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        350: {
          slidesPerView: 3,
          spaceBetween: 0,
          
        },
        540: {
          slidesPerView: 3,
          spaceBetween: 0,
          
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 0,
          
        },
        1100: {
          slidesPerView: 5,
          spaceBetween: 0,
         
        },
        1200: {
          slidesPerView: 5,
          spaceBetween: 0,
         
        },
      }
    });

CSS

.swiper-container {
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
  /* position: absolute; */
  margin: 20px auto;
  justify-content: center;
}

.swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  
}

.swiper-slide {
  align-items: center;
  height: 300px;
  /* min-width: 200px !important; */
  width: 200px !important;
  display:flex;
  justify-content: center;

}

.swiper-pagination {
  padding-bottom: 15px;
}

.swiper-container .swiper-wrapper .swiper-slide .card {
  min-width: 185px !important;
}

.cardWrapper {
  padding: 10px 10px 0px 10px;
}

.cardTextHeading {
  font-family: "DINPro-Medium";
  font-size: 16px;
}

.cardTextSubheading {
  font-family: "DINPro-Regular";
  font-size: 16px;
  text
}

.cardTextContent {
  font-family: "DINPro-Medium";
  font-size: 10px;
  padding-bottom: 0;
  margin-bottom:0;
}

.cardTextBottom {
  font-family: "DINPro-Regular";
  font-size: 10px;
  color: #9A9A9A;
  text-align: left;
}

#cardTextProductData {
  font-family: "DINPro-Regular";
  font-size: 12px;
  color: #3DA9EA;
  text-align: left;
  margin-bottom: 0;
}

.CardpriceTag {
  font-family: "DINPro-Medium";
  font-size: 20px;
  color: #D0021B;
  text-align: right;
  margin-bottom:0;
  margin-top:0;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>



<div class="container-fluid mt-4 pl-5 pr-5">
        <div class="row">
            <div class="col-12" style="height: 475px;">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="card" style="width: 185px;">
                                <div class="card-body p-0">
                                    <div class="CardWrapper">
                                        <img id="img-top-size" class="card-img-top pb-3" src="https://placeimg.com/160/160/any" alt="Card image cap">
                                        <h5 class="card-title cardTextHeading">Lorem ipsum</h5>
                                        <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">Lorem ipsum</h6>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">ⓘ Lorem ipsum</a></p>
                                        <p class="card-text cardPriceTag text-right">4,<span style="font-size: 12px;">98€/m²</span></p>
                                        <p class="cardTextBottom text-right pb-0">inkl. 19% MwSt. zzgl Versand</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card" style="width: 185px;">
                                <div class="card-body p-0">
                                    <div class="CardWrapper">
                                        <img id="img-top-size" class="card-img-top pb-3" src="https://placeimg.com/160/160/any" width="" height="" class="d-inline-block"  alt="Card image cap">
                                        <h5 class="card-title cardTextHeading">Lorem ipsum</h5>
                                        <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">Lorem ipsum</h6>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">ⓘ Lorem ipsum</a></p>
                                        <p class="card-text cardPriceTag text-right">6,<span style="font-size: 12px;">98€/m²</span></p>
                                        <p class="cardTextBottom text-right pb-0">inkl. 19% MwSt. zzgl Versand</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card" style="width: 185px;">
                                <div class="card-body p-0">
                                    <div class="CardWrapper">
                                        <img id="img-top-size" class="card-img-top pb-3" src=https://placeimg.com/160/160/any" width="" height="" class="d-inline-block"  alt="Card image cap">
                                        <h5 class="card-title cardTextHeading">Lorem ipsum</h5>
                                        <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">Lorem ipsum</h6>
                                        <p class="card-text text-left cardTextContent">Lichtdurchlässigkeit</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">ⓘ Lorem ipsum</a></p>
                                        <p class="card-text cardPriceTag text-right">5,<span style="font-size: 12px;">98€/m²</span></p>
                                        <p class="cardTextBottom text-right pb-0">inkl. 19% MwSt. zzgl Versand</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card" style="width: 185px;">
                                <div class="card-body p-0">
                                    <div class="CardWrapper">
                                        <img id="img-top-size" class="card-img-top pb-3" src="https://placeimg.com/160/160/any" width="" height="" class="d-inline-block"  alt="Card image cap">
                                        <h5 class="card-title cardTextHeading">Lorem ipsum</h5>
                                        <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">Lorem ipsum</h6>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">ⓘ Lorem ipsum</a></p>
                                        <p class="card-text cardPriceTag text-right">8,<span style="font-size: 12px;">98€/m²</span></p>
                                        <p class="cardTextBottom text-right pb-0">inkl. 19% MwSt. zzgl Versand</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card" style="width: 185px;">
                                <div class="card-body p-0">
                                    <div class="CardWrapper">
                                        <img id="img-top-size" class="card-img-top pb-3" src="https://placeimg.com/160/160/any" width="" height="" class="d-inline-block" alt="Card image cap">
                                        <h5 class="card-title cardTextHeading">Lorem ipsum</h5>
                                        <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">Lorem ipsum</h6>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_filled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p class="card-text text-left cardTextContent">Lorem ipsum</p>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_filled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">ⓘ Lorem ipsum</a></p>
                                        <p class="card-text cardPriceTag text-right">7,<span style="font-size: 12px;">98€/m²</span></p>
                                        <p class="cardTextBottom text-right pb-0">inkl. 19% MwSt. zzgl Versand</p>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
         <div class="swiper-pagination"></div>
                </div>
     
            </div>
        </div>
    </div>

Answer 1

可能な解決策を備えたコードペン: https://codepen.io/antonioio/pen/VwWaPme

swiper-slide-prev と swiper-slide-next 変換プロパティを調整するだけです。私はそれがびくびくすることに気づきました。そこで、スワイパースライドにトランジションのしやすさを追加しました。

    .card-body {
       width: 18rem;
    }
    .swiper-slide{
       display: flex;
       justify-content: center;
       transition: all .4s ease;             
    }
    .swiper-slide.swiper-slide-prev{
        transform: translateX(15%);
    }           
    .swiper-slide.swiper-slide-next{
        transform: translateX(-15%);
    }