REACTJS - Aplicação de Página �nica - #6 Slideshow

No vídeo-tutorial de hoje vamos criar o slideshow do nosso projeto. Para tanto vamos editar o componente Slide.js.

Criando slideshow no ReactJS

Para fazermos o slideshow vamos utilizar o módulo externo React Image Gallery.

Posteriormente a instalação do módulo no nosso terminal vamos importá-lo no componente Slide e chamar as fotos, conforme demonstrado abaixo:

import React from 'react';
import ImageGallery from 'react-image-gallery';
import "react-image-gallery/styles/css/image-gallery.css";

export default class Slide extends React.Component {
    render() {
        const images = [
            {
                original: '/img/photos/original/a.jpg',
                thumbnail: '/img/photos/thumb/a.jpg',
            },
            {
                original: '/img/photos/original/b.jpg',
                thumbnail: '/img/photos/thumb/b.jpg',
            },
            {
                original: '/img/photos/original/c.jpg',
                thumbnail: '/img/photos/thumb/c.jpg',
            },
            {
                original: '/img/photos/original/d.jpg',
                thumbnail: '/img/photos/thumb/d.jpg',
            },
            {
                original: '/img/photos/original/e.jpg',
                thumbnail: '/img/photos/thumb/e.jpg',
            },
            {
                original: '/img/photos/original/f.jpg',
                thumbnail: '/img/photos/thumb/f.jpg',
            },
            {
                original: '/img/photos/original/g.jpg',
                thumbnail: '/img/photos/thumb/g.jpg',
            },
            {
                original: '/img/photos/original/h.jpg',
                thumbnail: '/img/photos/thumb/h.jpg',
            },
            {
                original: '/img/photos/original/i.jpg',
                thumbnail: '/img/photos/thumb/i.jpg',
            },
            {
                original: '/img/photos/original/j.jpg',
                thumbnail: '/img/photos/thumb/j.jpg',
            }
        ]
        return (
            <ImageGallery items={images} autoPlay={true} />
        );
    }
}

Repare que no componente acima criamos uma constante com todas as fotos (original e thumbnail) e depois exportamos essa propriedade para o componente ImageGallery.

Posteriormente basta fazermos a estilização desses componentes no CSS:

@media screen and (max-width: 480px) {
    .image-gallery{float:left; width: 90%; margin: 0 5%;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .image-gallery{float:left; width: 80%; margin: 0 10%;}
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
    .image-gallery{float:left; width: 42%; margin: 0 4%;}
}

@media screen and (min-width: 1200px) {
    .image-gallery{float:left; width: 36%; margin: 0 7%;}
}

Sucesso nos códigos e na vida!