CODEWITHSUNDEEP
htmlcssswiper.jsidangero
Branson Lee
Branson Lee

Reputation: 1

How to use idangero swiper with words on the background then response?

I want to make a carousel like the one on this website: https://debut-demo.myshopify.com/ The words stick with the picture it belongs to in the carousel. I tried to use position: relative and position: absolute to make the words on the background.

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;
    }
  }
}

enter image description here enter image description here

Upvotes: 0

Views: 28

Answers (0)

Related Questions