Есть swiper слайдер общий (блок с фото + блок с текстом)
Внутри блока с фото инициализируется еще один слайдер.
Проблема в том, что на маленьких экранах при адаптиве общий блок перестраивается в колонку (flex-direction: column; align-items: center; ) и контент должен быть по центру, но внутренний слайдер не хочет становиться по центру, в то время как блок с текстом прекрасно выравнивается.
разметка
<div class="swiper-container mainrooms-slider">
<div class="swiper-wrapper">
<?php foreach(get_field('mainrooms') as $item): ?>
<div class="swiper-slide mainrooms-slide">
<div class="swiper-container mainrooms-inset">
<div class="swiper-wrapper">
<?php foreach($item["mainrooms_img"] as $itemChild): ?>
<div class="swiper-slide mainrooms-slide__img">
<img src="<?= $itemChild['mainrooms_slide']['url'] ?>" alt="<?= $itemChild['mainrooms_slide']['alt'] ?>">
<div class="mainrooms-slide__nav">
<i class="fas fa-angle-left mainrooms-prev mainrooms-slide__nav__prev"></i>
<i class="fas fa-angle-right mainrooms-next mainrooms-slide__nav__next "></i>
</div>
</div>
<?php endforeach;?>
</div>
</div>
<div class="mainrooms-slide__content">
<h3 class="mainrooms-slide__content__title"><?= $item['mainrooms_title'] ?></h3>
<div class="mainrooms-slide__content__text"><?= $item['mainrooms_text'] ?></div>
<span class="mainrooms-slide__content__price">от <span><?= $item['mainrooms_price'] ?> р.</span></span>
<div class="mainrooms-slide__content__links">
<span class="mainrooms-slide__content__more"><a href="#contacts">Подробнее</a></span>
<span class="mainrooms-slide__content__reserv"><a href="/">Забронировать</a></span>
</div>
</div>
<!-- /.mainrooms-slide__content -->
</div>
<!-- /.mainrooms-slide -->
<?php endforeach;?>
</div>
<!-- /.swiper-wrapper -->
</div>
<!-- /.swiper-container .mainrooms-slider -->
<!-- Add Arrows -->
<div class="mainrooms-next mainrooms-right-arrow"></div>
<div class="mainrooms-prev mainrooms-left-arrow"></div>
</div>
<!-- /.container -->
<!-- Add Pagination -->
<div class="mainrooms-slidenav"></div>
стили
.mainrooms
padding-top: 80px
padding-bottom: 80px
position: relative
&-right
&-arrow
width: 25px
height: 40px
background-image: url('../img/slider_elem/mainrooms-right-arrow.svg')
background-repeat: no-repeat
position: absolute
right: -35px
top: 50%
transform: translateY(-50%)
cursor: pointer
z-index: 15
border: none
outline: none
&-left
&-arrow
width: 25px
height: 40px
background-image: url('../img/slider_elem/mainrooms-left-arrow.svg')
background-repeat: no-repeat
position: absolute
left: -35px
top: 50%
transform: translateY(-50%)
cursor: pointer
z-index: 15
border: none
outline: none
&-slidenav
position: absolute
bottom: 20px !important
text-align: center
width: 100%
transition: .3s opacity
&__bullet
width: 6px
height: 6px
border: 1px solid #000
border-radius: 100%
display: inline-block
opacity: 1
margin: 7px
cursor: pointer
outline: none
&__activebullet
position: relative
background-color: #000000
outline: none
&::before
content: ''
position: absolute
width: 15px
height: 15px
border: 1px solid #000
border-radius: 50%
top: 50%
left: 50%
transform: translate(-50%, -50%)
&-inset
padding-top: 20px
&-greybg
position: absolute
top: 0
left: 0
width: 100%
height: 590px
background-color: #f4f4f4
z-index: -1
&-titlebox
margin-left: 3%
margin-bottom: 40px
&-subtitle
+gilr
font-size: 16px
letter-spacing: 0.05em
padding-left: 5px
position: relative
&::before
content: ''
position: absolute
width: 120px
height: 8px
left: -130px
top: 50%
transform: translateY(-50%)
background-image: url('../img/line-before-title.svg')
background-repeat: no-repeat
&-title
+gilb
font-size: 55px
text-transform: uppercase
letter-spacing: 0.05em
&-slider
padding-top: 25px
position: relative
&-slide
display: flex
justify-content: space-between
&__img
width: auto
// width: 750px
height: 420px
position: relative
&::after
content: ''
position: absolute
width: 750px
height: 420px
border: 1.5px solid #000
right: -20px
top: -20px
z-index: -1
&__img img
width: 100%
height: 100%
object-fit: cover
&__nav
position: absolute
width: 100px
height: 40px
bottom: 0
right: 0
background-color: #fbfbfb
font-size: 25px
color: #000000
display: flex
&__next
display: flex
align-items: center
justify-content: center
border-left: 1px solid #e0e0e0
width: 50%
height: 100%
cursor: pointer
color: #9d9d9d
transition: ease 0.4s
&:hover
color: #000000
&__prev
display: flex
align-items: center
justify-content: center
border-right: 1px solid #e0e0e0
width: 50%
height: 100%
cursor: pointer
color: #9d9d9d
transition: ease 0.4s
&:hover
color: #000000
&__content
+gilr
max-width: 400px
padding-top: 20px
padding-left: 3%
&__title
font-size: 35px
letter-spacing: 0.05em
margin-bottom: 25px
&__text
font-size: 16px
line-height: 1.6
letter-spacing: 0.05em
margin-bottom: 25px
padding-right: 25px
&__price
display: block
margin-bottom: 25px
&__price span
+gilb
font-size: 30px
&__links
display: flex
align-items: baseline
&__more
width: 160px
height: 45px
margin-right: 30px
&__more a
color: #ffffff
background-color: #373737
text-transform: uppercase
text-decoration: none
letter-spacing: 0.05em
width: 100%
height: 100%
display: flex
justify-content: center
align-items: center
transition: ease 0.4s
&:hover
background-color: #666666
&__reserv
width: 160px
height: 45px
&__reserv a
color: #373737
text-transform: uppercase
text-decoration: none
letter-spacing: 0.05em
border-bottom: 1px solid #373737
/***************************************************/
/***************************************************/
/**************** MEDIA mainrooms ****************/
/***************************************************/
/***************************************************/
@media (max-width: 1350px)
.mainrooms
&-slide
flex-direction: column
align-items: center
&__img
max-width: 820px
&-right
&-arrow
right: 13px
&-left
&-arrow
left: 13px
Кто-нибудь делал подобное?
Средний
