React slide-show-image

Par lilasq, il y a 3 ans

Javascript
Javascript React

Bonjour, dans le cadre d'un projet nous devons mettre en place un carrousel d'images avec React.
Les données (images de logements) proviennent d'un fichier JSON. Certains logements ont 4 images, d'autres 5 ou 6.
J'ai fait le choix d'utiliser react-slideshow-image, mon slideshow fonctionne parfaitement, le seul soucis est au niveau du nombre d'images par logement.
Comme le maximum de photos est de 6, j'ai créé 6 lignes "each-slide-effect" mais pour les logements qui en ont que 4 ou 5, cela créé des images "blanches" et donc une discontinuité dans mon diaporama.
Je pense qu'il faudrait que j'utilise une boucle pour palier à ce problème mais je sèche.
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'; import '../../styles/Slideshow.scss'; const Slideshow = ( {pictures} ) => { const { id } = useParams(); let rental = RentalsListing.find(i => i.id === id); return ( <section id='slideshow'> <Slide> <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${rental.pictures[0]})` }}></div> </div> <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${rental.pictures[1]})` }}></div> </div> <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${rental.pictures[2]})` }}></div> </div> <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${rental.pictures[3]})` }}></div> </div> <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${rental.pictures[4]})` }}></div> </div> <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${rental.pictures[5]})` }}></div> </div> </Slide> </section> ); }; export default Slideshow;

1 réponse

JoolsMcFly, il y a 3 ans

Il faut convertir chaque rental.pictures en élément, quelque chose comme ça :

const Slideshow = ( {pictures} ) => { const { id } = useParams(); const photos = RentalsListing .find(i => i.id === id) .pictures .map( photo => ( <div className="each-slide-effect"> <div style={{ 'backgroundImage': `url(${photo})` }}></div> </div> ); return ( <section id='slideshow'> <Slide> {photos} </Slide> </section> ); };

Ceci dit, au lieu de récupérer les photos de RentalsListing à l'intérieur du composant je les passserais en props comme tu as l'air d'avoir fait avec pictures sauf que tu ne l'utilises pas.