Преобразовать масштабированное расстояние между элементами

Question

Просто я создал слайдер, используя библиотеку swiper.js (вертикальная), и проблема в том, что он всегда центрирует плитку слайдера с красным фоном. Из-за свойства масштаба преобразования его высота увеличивается, и поле также не работает должным образом. Центральный слайдер похож на наложение на предыдущий и следующий слайды.

Пожалуйста, запустите приведенный ниже код, чтобы понять меня больше.

.slider {
    display: block;
    background-color: blue;
    width: calc(100% - 50px);
    height: auto;
    margin: 5px 25px;
    padding: 20px;
    border-radius: 12px;
    color: #FFF;
}

.slider.active {
    background-color: red;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);1
}

<div class="swiper-container">
    <div class="slider">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider previous">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider active">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider next">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Answer 1

Похоже, вы хотите, чтобы ваши элементы ползунка не превышали родительский <div> при масштабировании. Могу ли я предложить достичь этого с четырьмя идеями:

1. Использование CSS Flexbox для упорядочивания ваших ползунков и центрирования их по вертикали и горизонтали.
2. Добавление box-sizing: border-box; к стилюползунков, чтобы обеспечить учет границ при расчете размера ползунка.
3. Назначение ползунка в процентах ширины на основе масштабирования, которое вы хотите применить к ним, чтобы они не превышали размерродитель, когда масштабируется. Я бы предложил взять минимальное значение (1 / коэффициент масштабирования). В этом случае: floor(1 / 1.1) = 90.
4. Увеличивайте масштаб только по оси X, чтобы избежать наложения элементов ползунка.

Вот как это будет выглядеть (я добавил родительскую рамкучтобы было легче видеть):

.swiper-container {
    width: 100%;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider {
    display: block;
    background-color: blue;
    width: 90%;
    height: auto;
    padding: 20px;
    margin: 5px 0px;
    border-radius: 12px;
    color: #FFF;
    box-sizing: border-box;
}

.slider.active {
    background-color: red;
    -webkit-transform: scale(1.1, 1);
    transform: scale(1.1, 1);
}

<div class="swiper-container">
    <div class="slider">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider previous">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider active">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider next">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>