Numéroter un react-slideshow-image

lilasq
Javascript
Javascript React

Bonjour,

J'ai mis un slideshow avec React, il faut maintenant que j'ajoute la numérotation, par exemple 2/5.
Mais voilà je bloque ! je vous balance mon code ci dessous, merci par avance de votre aide :)


import React from 'react';
import { Slide } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css';
import { useParams } from 'react-router-dom';
import RentalsListing from '../../datas/RentalsListing.json';

const Slideshow = () => {
    const { id } = useParams();
    let rental = RentalsListing.find(i => i.id === id);

    // Nb d'images à afficher
    const picturesNb = Math.min(rental.pictures.length);

    // Tableau pour chaque image
    const pictures = [];
    for (let i = 0; i < picturesNb; i++) {
        pictures.push(
        <div key={i} className="each-slide-effect">
            <div style={{ 'backgroundImage': `url(${rental.pictures[i]})` }}></div>
        </div>
      );
    }

    return (
        <section id='slideshow'>
            <Slide>
                {pictures}
            </Slide>
            <div className="position">
                <p>{??}/{pictures.length}</p>
            </div>
        </section>
    );
};

export default Slideshow;

2 réponses

maragouin

Bonjour,
moi je ferai quelque chose de ce style

import React from "react";
import { Slide } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
import { useParams } from "react-router-dom";
import RentalsListing from "../../datas/RentalsListing.json";

const Slideshow = () => {
    const { id } = useParams();
    let rental = RentalsListing.find((i) => i.id === id);

    // Nb d'images à afficher
    const picturesNb = Math.min(rental.pictures.length);

    // Tableau pour chaque image
    const pictures = [];
    for (let i = 0; i < picturesNb; i++) {
      pictures.push(
        <React.Fragment key={i}>
          <div className="each-slide-effect">
            <div style={{ backgroundImage: `url(${rental.pictures[i]})` }}></div>
          </div>
          <div className="position">
            <p>
              {i+1}/{picturesNb}
            </p>
          </div>
        </React.Fragment>
      );
    }

    return (
      <section id="slideshow">
      <Slide>{pictures}</Slide>
    </section>
  );
};

export default Slideshow;
Smith john

Hello, je le ferai comme ceci pour ma part pas besoin 

const SlideImage = ({pictures, index}) => {

    return (
        <>
            <div className="each-slide-effect">
                <div style={{ backgroundImage: `url(${pictures[index]})` }}></div>
            </div>
            <div className="position">
                <p>
                    {pictures[index] + 1}/{pictures.length}
                </p>
            </div>
        </>
    )
}

const Slideshow = () => {
    const { id } = useParams();
    const pictures = RentalsListing.find((i) => i.id === id)?.pictures;

    return (
        <>
        {pictures?.length > 0 ? (
          <section id="slideshow">
              <Slide>
                  {pictures.map((picture, index) => (
                    <SlideImage pictures={pictures} index={index} key={index ou picture.id si tu as}/>
                  ))}
              </Slide>
          </section>
            ) : null}
        </>
    );
};