Как изменить позиции блока и pagination в Swiper.js?

Question

[lychak_vlad]

Всем привет!
Над этой задачей я 2 дня голову ломаю, поэтому обратился к вам, надеюсь кто-нибудь поможет)

Нужно сделать вот такой блок


А у меня получается вот так


Я не могу понять что я делаю не так, поэтому появился ряд вопросов:

1. Как спозиционировать блок с контентом так, что бы была видна половина другого блока и при этом они нормально переключались?

2. Какие свойства надо изменить, что бы иконка человека чуть выходила из-за блока и не обрезалась?

3. Какие свойства задать пагинации что бы она была ниже блока и не обрезалась?

// JS
new Swiper('.quotes__slider', {
    slidesPerView: 1,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

// HTML
  <section>
    <div class="quotes">
      <div class="right__container--quotes">
        <div class="quotes__wrapper">
          <div class="quotes__body">
            <h3 class="quotes__body-suptittle">TESTIMONIALS</h3>
            <h2 class="quotes__body-tittle">Customers's quotes</h2>
            <p class="quotes__body-text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui
              laudem an.</p>
          </div>
          <div class="quotes__slider swiper">
            <div class="quotes__slider-wrapper swiper-wrapper">

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
                <img class="quotes__slider-icon" src="img/quotes.png" alt="photo">
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>

              <div class="quotes__slider-column swiper-slide">
                <p class="quotes__slider-text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
                  vidit
                  tractatos, vero tractatos ius an, in mel diceret persecuti.
                </p>
              </div>


            </div>
            <div class="quotes-pagination swiper-pagination"></div>
          </div>
        </div>

      </div>
    </div>
  </section>

//CSS
.quotes{
    background: linear-gradient(180deg, #EAF0FF 0%, #F6F9FF 100%);
    overflow: hidden;
  }
  .quotes__wrapper {
    display: flex;
    min-width: 0;
  }
  .quotes__body {
    max-width: 553px;

  }
  .quotes__body-suptittle {
    font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #3D4F9F;
padding: 146px 0px 31px 0px;
  }
  .quotes__body-tittle {
    font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 45px;
color: #3D4F9F;
padding-bottom: 20px;
  }
  .quotes__body-text {
    font-family: 'OpenSans_SemiCondensed';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 23px;
letter-spacing: 0.03em;
color: #A4ABC8;
padding-bottom: 183px;
max-width: 333px;
  }
  
  .right__container--quotes {
    margin: 0 auto;
    max-width: 1505px;
    margin-right: -240px;
    padding: 0px 15px;
  }

  .quotes__slider {
    filter: drop-shadow(0px 15px 50px #D4DCF1);
    margin: 150px 0px 100px 0px;
    max-width: 450px;
    padding-left: 150px ;
  }
  

  .quotes__slider-column {
    background: #FFFFFF;
    box-shadow: 0px 5px 50px #F3F5FA;
    position: relative;
    border: 1px solid #D8E3FE;
    max-width: 450px;
    max-height: 300px;
  }
  
  .quotes__slider-text {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.03em;
    color: #676F95;
    padding: 41px 71px 53px 69px;
  }
  .quotes__slider-icon{
    position: absolute;
    bottom: -17%;
    left: 43%;
  }

Comments

[Ankhena]

2. Какие свойства надо изменить, что бы иконка человека чуть выходила из-за блока и не обрезалась?

Либо padding либо и паддинг и позиционировать относительно текста, а не слайда.

3. Какие свойства задать пагинации что бы она была ниже блока и не обрезалась?

Вынуть её из блока с overflow и позиционировать как хочется.

[Alexander3928]

Если указываешь так много html,css,js лучше в codepen закинуть.
Лучше делать слайд по блоку и в него уже как ты хочешь расположить. Чтобы ты далеко с position:absolute не уходил и не указывал botton, top, left, right в процентах. Экран будет меняется и верстка сломается. Лучше всего прибивать botton, top, left, right к гранижу родителя

[lychak_vlad]

Ankhena, Спасибо!

[lychak_vlad]

Alexander3928, спасибо!
А через какой класс и как правильнее пагинацию позиционировать?

[Alexander3928]

lychak_vlad, я бы элемент с текстом и картинкой обернул бы дивом, с пагинацией аналогично только указал бы position: absolute, botton: 0. И родителю position:relative. чтобы панигация не голяла