Как я могу правильно центрировать элементы (фиксированная ширина - слайдер)?

Я пытаюсь центрировать свои слайды внутри моего swiper-container. Окончательная версия должна выглядеть так, как показано на следующем рисунке:

SwiperJs — окончательная версия (большие, средние и маленькие экраны:) 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/[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.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/[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.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/[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.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/[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.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/[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>

javascript carousel css twitter-bootstrap swiperjs
person madev    schedule 19.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Следуя документам swiper по API и Исходный код вы можете легко настроить свой слайдер!

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

Для центра и пространства вы также можете редактировать и обновлять этот стиль.

person Momin    schedule 19.10.2020

arrow_upward
0
arrow_downward

Только что создал Codepen, чтобы увидеть проблему.

Теперь часть этого работает, и нумерация страниц правильно соответствует .swiper-slide, но теперь проблема в том, что cards полностью раздавливается в своем width при переходе на меньшие размеры экрана.

Так что проблема остается.

Если я попытаюсь назначить свойство min-width (как показано) ниже...

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

... к .swiper-slide, так что cards вписывается в swiper-slide, затем cards отображаются так, как должны, но тогда pagination и pagination-dots не соответствуют должным образом swiper-slide соответственно cards.

person madev    schedule 22.10.2020