Swiper JS карусель не подходит внутри Bootstrap 4 цв - PullRequest
Новая
       11

Swiper JS карусель не подходит внутри Bootstrap 4 цв

0 голосов
/ 29 февраля 2020

Я пытаюсь поместить Swiper JS карусель в div с классом col Bootstrap 4, но моя карусель не остается внутри col div. Чтобы проиллюстрировать это, я пытаюсь добиться макета:

layout desired

Но по какой-то странной причине, когда я помещаю код карусели во второй col div, моя страница заканчивается следующим образом:

current layout

При работе со свойствами карусели с помощью инструмента Inspect Element я выяснил, что вызывает это свойство display: flex, которое есть у swiper-wrapper, и я до сих пор не могу понять, как сделать так, чтобы карусель хорошо вписывалась в мой второй col div.

, который я пробовал инкапсуляция swiper-container в другом div, установка max-width: 100% и min-width: 100%, но, похоже, ничего не работает, это похоже на то, что свойство display: flex класса row конфликтует с display: flex div swiper-wrapper.

Вот код для этой части макета:

HTML

<div id="myaboutdiv" class="row">
    <div class="col topic">
        <p>TEXT</p>
    </div>
    <div class="col mt-5">
        <p class="text-left whoami"><i>This is some text</i></p>
        <p class="text-justify">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem purus, venenatis vel magna et, consectetur cursus libero. In augue est, iaculis sit amet faucibus ut, condimentum vitae ante. Donec et leo eu dolor suscipit viverra at et mauris. Quisque dapibus leo at ipsum elementum, sit amet interdum sapien ornare. Integer justo lorem, porttitor in gravida in, porttitor at tellus. Sed aliquet malesuada luctus. Duis ac nisl vitae nibh mattis luctus eget a ex. 
        </p>
        <br>
        <p class="text-left whoami"><i>Here's the Swiper Carousel</i></p>
        <div class="swiper-container" id="academichistory">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</div>

CSS

.topic {
  font-weight: bold;
  font-size: 2.5rem;
}

.whoami {
  color: grey;
  font-weight: 500;
}

И, наконец, вот несколько скриншотов:

swiper-wrapper с display: flex:

Screenshot of current layout

swiper-wrapper без т Он display: flex свойство:

swiper-wrapper without display flex

Я использую:

Swiper v5.3.6 и Bootstrap 4 .

И на всякий случай вот код JS, который инициализирует карусель Swiper:

JavaScript

var swiper = new Swiper('#academichistory', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

1 Ответ

1 голос
/ 01 марта 2020

Вы можете решить это, используя абсолютное позиционирование.
Поскольку .swiper-container уже имеет position: relative, вы можете добавить position: absolute к .swiper-wrapper. Кроме того, расположите его, используя left: 0 и top: 0.
. Наконец, абсолютно позиционированному переключателю требуется явная высота, поэтому добавьте желаемую высоту в .swiper-container. 

.swiper-container {
  height: 270px;
}
.swiper-wrapper {
  position: absolute;
  left: 0;
  top: 0;
}
...