Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs Made a Carousel but images refuse to show

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?

Tags:

2

Answers


  1. 0

    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. 0

    use backgroundImage instead of background

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search