skip to Main Content

code snippet

I’ve made simple cards using the background method just fine. It’s like as soon as I try to map it, all of a sudden the images don’t want to show as shown on the left side of the picture. Only the arrows show and when doing the browser inspection, I can see the divs cycling, just no image.

I tried z-index, I tried changing the position (absolute/relative), did different pictures, and even made a small div separate to check if the style={{ background: url(${image.url})}} was wrong, but that worked just fine. Any ideas or Carousel alternative methods?

2

Answers


  1. It would be easier to help if you could share your component code. But for alternatives, there are many easy to use alternatives for carousels.

    One that I have used in the past is bootstrap’s: Bootstrap Carousel

    For using bootstrap, you’ll need to first add it to your project. You can do this in 2 ways in React:

    1. [Recommended] Install using npm: npm install [email protected]
    2. Install using yarn (if you are using it): yarn add [email protected]
    3. Using CDN: You can add the below link and script in your index.html
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    

    More Details: https://getbootstrap.com/docs/5.3/getting-started/download/

    Example of a simple carousel using Bootstrap:

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
      </head>
      <body>
        <div id="carouselExample" class="carousel slide">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://source.unsplash.com/random?technology" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://source.unsplash.com/random?developer" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://source.unsplash.com/random?computer" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
      </body>
    </html>

    Try using this, hope this helps 🙂

    Login or Signup to reply.
  2. use backgroundImage instead of background

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search