.wrapper {
width: 80%; /*ширина слайда*/
overflow: hidden; /*скрыть все что за пределами*/
min-height: 150px; /*минимальная*/
max-height: 200px; /*макс высоты*/
display: block; /*вести себя как блок*/
margin: 0 auto; /*выравнить, где 0 это верх и низ, а авто это горизонтальная*/
}<div class="container">
<div class="row">
<!--изображение слева-->
<div class="col-lg-5 col-12 order-2 order-sm-2 order-lg-1 ">
<div class="position-abbout-img wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
<img src="<?php the_field('izobrazhenie');?>" class="abbout-img">
</div>
</div>
<!--//изображение слева-->
<div class="col-lg-6 col-12 order-1 order-sm-1 order-lg-2 ">
<!--инфо справа-->
<div class="padding-main-top wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
<h2 class="main-caption-section abbout-us-caption">О компании</h2>
<?php the_field('tekst_o_kompanii');?>
</div>
<!--//инфо справа-->
</div>
</div>
</div>
<div class="position-abbout"></div>
</section>
<section class="reviews reviews-back wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
<div class="container">
<h2 class="caption">Отзывы</h2>
<div class="slider-abbout">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<?php
// проверяем есть ли в повторителе данные
if( have_rows('otzyvy_o_kompanii') ):
// перебираем данные
while ( have_rows('otzyvy_o_kompanii') ) : the_row();
// отображаем вложенные поля ?>
<div class="swiper-slide wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
<div class="reviews-slide ">
<img src="<?php the_sub_field('izobrazhenie');?>" alt="">
<h3 class="caption-slider-abbout"><?php the_sub_field('imya_i_familiya');?></h3>
<p class="text-revies-slide"><?php the_sub_field('otzyv');?></p>
</div>
</div>
<?php endwhile;
else :
// вложенных полей не найдено
endif;
?>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
</div>
</div>
<div id="wrapper" class="leave-revies">
<img src="<?= bloginfo('template_directory'); ?>/template/img/left-leaves-back.png" alt="image" class="left-leaves-img">
<button type="button" class="leave-revies-btn" data-toggle="modal" data-target="#exampleModalCenter">Оставить отзыв</button>
<img src="<?= bloginfo('template_directory'); ?>/template/img/right-leaves-back.png" alt="image" class="right-leaves-img">
</div>
<!-- Modal -->
<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" style="padding: 0!important;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Оставить отзыв</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?= bloginfo('template_directory'); ?>/template/img/close.svg" alt=""></span>
</button>
</div>
<div class="modal-body">
<?php echo do_shortcode( '[contact-form-7 id="196" title="Оставить отзыв"]' ); ?>
</div>
</div>
</div>
</div>
</div>
</section>
</main><!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide infoPost">
<div class="infoText">
<h2>Коллекция авторских коробок</h2>
<p>Бесплатная доставка по городу Воронеж от 2000 рублей</p>
<a href="">Купить</a>
</div>
</div>
<div class="swiper-slide imgPost1"> </div>
<div class="swiper-slide infoPost">
<div class="infoText">
<h2>Коллекция авторских коробок</h2>
<p>Бесплатная доставка за город от 3999 рублей</p>
<a href="">Купить</a>
</div>
</div>
<div class="swiper-slide imgPost2"> </div>
<div class="swiper-slide infoPost">
<div class="infoText">
<h2>Коллекция авторских коробок</h2>
<p>Бесплатная доставка по городу от 1700 рублей</p>
<a href="">Купить</a>
</div>
</div>
<div class="swiper-slide imgPost3"> </div>
</div>
<!-- Add Arrows -->
<div class="btns">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="js/slider.js"></script>var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 0,
// init: false,
loop: true,
slidesPerGroup: 2,
autoplay: {
delay: 7000,
disableOnInteraction: false
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
300: {
<b> slidesPerView: 'auto',</b>
spaceBetween: 0,
},
768: {
slidesPerView: 'auto',
spaceBetween: 0,
},
1024: {
slidesPerView: 'auto',
spaceBetween: 0,
},
}
});.infoPost {
width: 1165px;
height: auto;
margin-left: -150px;
background: url("../img/bac-slider.png") no-repeat;
mix-blend-mode: multiply;
background-position: top center;
}
.imgPost1 {
width: 750px;
}
.imgPost2 {
width: 750px;
}
.imgPost3 {
width: 750px;
}@media (min-width: 544px) {
прописывать стили для андроида
}