Как использовать idangero swiper со словами на фоне, тогда ответ? - PullRequest
Новая
       64

Как использовать idangero swiper со словами на фоне, тогда ответ?

0 голосов
/ 03 февраля 2019

Я хочу сделать карусель, подобную той, что на этом сайте: https://debut -demo.myshopify.com / Слова придерживаются картинки, которой они принадлежат в карусели.Я пытался использовать position: relative и position: absolute, чтобы сделать слова на заднем плане.

1.My HTML 

<div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <h2>title01</h2>
                <img src="../src/images/background1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../src/images/background2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../src/images/background3.jpg" alt="">
            </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>

2.My SCSS 

    .swiper-container {

    .swiper-slide {
    max-height: 700px;
    position: relative;

    img {
      -webkit-filter: brightness(.8);
      width: 100%;
    }

    h2 {
      top: 245px;
      left: 100px;
      font-size: 4.0625rem;
      z-index: 20;
      position: absolute;
    }
  }
}

введите описание изображения здесь введите описание изображения здесь

...