0

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

5
  • Hey Branson, what is the current behavior with the code and how is it not matching what you would like? You might find this W3 article on carousels helpful.
    – Jack Moody
    Feb 3, 2019 at 16:27
  • Hey Jack, now the words are on the background already without response. Feb 3, 2019 at 16:32
  • Hey Jack, i added two pictures already. Can you see it please? Feb 3, 2019 at 16:40
  • it's the same picture on the same slide from what I can tell.
    – Jack Moody
    Feb 3, 2019 at 16:42
  • I just zoom in the window. Feb 3, 2019 at 20:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.