javascript - 如何正确居中项目（固定宽度 - 滑动滑动）？

Question

我尝试将我的幻灯片放在我的swiper-container. 最终版本需要如下图所示：

每个分页点都应该自动与一张卡片相关联。

我不确定如何实现这一目标。卡片未正确居中。

不确定，但由于固定宽度，居中不起作用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>

score 0 · Accepted Answer

刚做了一个Codepen来查看问题。

现在它的部分工作并且分页与正确对应.swiper-slide，但现在的问题是，当转到较小的屏幕尺寸时cards，它会完全“压碎” 。width

所以问题依然存在。

如果我尝试在下面分配一个min-width属性（如图所示）......

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

... 到.swiper-slide, 以便cards适合swiper-slide, 然后cards按应有的方式显示 , 但是 thepagination和the分别与.pagination-dots不正确对应。swiper-slidecards

score 0 · Accepted Answer

带有可能解决方案的代码笔：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%);
    }

score -2 · Accepted Answer

通过遵循 swiper API文档和源代码，您可以轻松自定义滑块！

.swiper-container {
    width: 90%;
    height: 100%;
}

对于中心和空间，您也可以编辑和更新此样式。

javascript - 如何正确居中项目（固定宽度 - 滑动滑动）？

3 回答 3

Related

Reference