Как сделать так, чтобы swiper slider не расширял родительский блок? - PullRequest
Новая
       26

Как сделать так, чтобы swiper slider не расширял родительский блок?

0 голосов
/ 27 мая 2019

У меня есть две колонки макета.Боковая панель имеет фиксированную ширину.Правая сторона должна расти вертикально, а не горизонтально.Модель Flexbox сломала мне мозг.Как сделать так, чтобы swiper carousel не расширял родительский блок?

В коде ручки этого не видно, но в браузере появляется горизонтальная полоса прокрутки.Попробуйте изменить размер окна - что-то странное происходит, оно расширяется все больше и больше.

Еще раз.Мне нужно, чтобы правая сторона (alt-right и все ее содержимое) не расширялась в горизонтальном направлении.И мне нужна одинаковая высота для alt-right и alt-sidebar (если они пусты, то высота должна соответствовать размеру экрана).

HTML: 

<div class="alt-wrapper">
    <div class="alt-top">
        <div class="alt-sidebar">
            ff
        </div>
        <div class="alt-right">
            <div class="alt-header">
f
            </div>
            <div class="alt-content">
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">
                            <div style="background-color: darkolivegreen">afas</div>
                        </div>
                        <div class="swiper-slide">
                            <div style="background-color: darkolivegreen">afas</div>
                        </div>
                        <div class="swiper-slide">
                            <div style="background-color: darkolivegreen">afas</div>
                        </div>
                        <div class="swiper-slide">Slide 2</div>

                        <div class="swiper-slide">
                            <div style="background-color: darkolivegreen">afas</div>
                        </div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>

                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- If we need scrollbar -->
                    <div class="swiper-scrollbar"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="alt-footer"></div>
</div>

CSS: 

body {
  background-color: red;
}
body, html {
  height: 100%;
}
.alt-wrapper {
  display: flex;
  flex-direction: column;
  background-color: red;
  min-height: 100%;
  flex: 1 1 100%;
  overflow: hidden;
  //height: 100%;
  //width: 100%;
}
.alt-top {
  display: flex;
  background-color: gold;
  min-height: 100%;
  flex: 1 1 100%;
}
.alt-footer {
  display: flex;
  flex-direction: column;
  height: 60px;
  background-color: greenyellow;
}
.alt-content {
  display: inline-flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 100%;
  padding: 1.6rem;

  flex: 1 1 100%;
}
.alt-sidebar {
  display: flex;
  min-height: 100%;
  width: 30rem;
  max-width: 30rem;
  background-color: aquamarine;
  flex: 0 0 100%;
}
.alt-right {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
}
.alt-header {
  display: flex;
  flex-direction: column;
  min-height: 60px;
  background-color: greenyellow;
}

JS: 

var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        slidesPerView: 2,
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });

Codepen

...