javascript - How can I center items (fixed-width - swiper-slide) properly?

I try to center my slides inside my swiper-container. The final version needs to look like in the following graphic:

SwiperJs - Final Version (large, medium and small screensizes:)

Every pagination dot should automatically correlate with a card.

I am not sure how to achieve this. The cards do not center properly.

Not sure, but could it be, that the centering does not work, because of the fixed-width swiper-slide ? If I don't give the slides a fixed-width, it will actually center properly, but of course the card-design then gets "crushed".

Here is my code:

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=".3.1/jquery.min.js"></script>
<script src=".5.2/js/bootstrap.min.js"></script>
<link href=".5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".min.js"></script>
<link href=".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="; 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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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="; 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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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=; 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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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="; 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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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="; 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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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>

I try to center my slides inside my swiper-container. The final version needs to look like in the following graphic:

SwiperJs - Final Version (large, medium and small screensizes:)

Every pagination dot should automatically correlate with a card.

I am not sure how to achieve this. The cards do not center properly.

Here is my code:

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg./swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg./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./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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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./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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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./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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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./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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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./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/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" width="15" height="15" class="d-inline-block"  alt=""></span>
                                        <span class="pr-1"><img src="<?php echo get_theme_file_uri('/images/[email protected]');?>" 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>

Share Improve this question edited Oct 19, 2020 at 16:35 isherwood 61.2k16 gold badges122 silver badges170 bronze badges asked Oct 19, 2020 at 12:50 madev 191 gold badge1 silver badge5 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Code pen with possible solution: https://codepen.io/antonioio/pen/VwWaPme

Just need to adjust the swiper-slide-prev and swiper-slide-next transform property. I noticed it does get jumpy though. So I added the transition ease to the swiper-slide.

    .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%);
    }

Just made a Codepen to see the problem.

Now parts of it work and the pagination is properly corresponding with the .swiper-slide, but problem now is, that the cards get pletely "crushed" in its width when going to smaller screensizes.

So the problem remains.

If I try to assign a min-width property (like shown) below ...

.swiper-slide {
        min-width: 200px !important;
    }

... to the .swiper-slide, so that the cards fit into the swiper-slide, then the cards are shown as they should, but then the pagination and the pagination-dots are not corresponding properly with the swiper-slide respectively with the cards.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I center items (fixed-width - swiper-slide) properly? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)