React-изображения карусели - PullRequest
Новая
       23

React-изображения карусели

0 голосов
/ 31 января 2020

Я пытаюсь создать карусель изображений / видео, используя https://jossmac.github.io/react-images/

, и это должно быть так, включая модальное значение: enter image description here

Я следую приведенному там фрагменту кода, но он не работает, и я не вижу пошагового руководства по созданию этой карусели. 

class Gall extends Component {
  state = { modalIsOpen: false }
  toggleModal = () => {
    this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
  }
  render() {
    const { modalIsOpen } = this.state;

    return (
      <ModalGateway>
        {modalIsOpen ? (
          <Modal onClose={this.toggleModal}>
            <Carousel views={images} />
          </Modal>
        ) : null}
      </ModalGateway>
    );
  }
}

export default Gall;

Может ли кто-нибудь помочь с кодами и ящиком?

Также возможно ли запустить модальный с текущим активным изображением?

Спасибо заранее.

1 Ответ

0 голосов
/ 31 января 2020

В их документах есть ссылка на источник 

// @flow
// @jsx glam
import glam from 'glam';
import React, { Component, Fragment } from 'react';

import { type ProviderProps } from '../../ImageProvider';
import Carousel, { Modal, ModalGateway } from '../../../src/components';
import { FooterCaption } from '../components';
import { getAltText } from '../formatters';

type State = {
  selectedIndex?: number,
  lightboxIsOpen: boolean,
};

export default class Home extends Component<ProviderProps, State> {
  state = {
    selectedIndex: 0,
    lightboxIsOpen: false,
  };
  toggleLightbox = (selectedIndex: number) => {
    this.setState(state => ({
      lightboxIsOpen: !state.lightboxIsOpen,
      selectedIndex,
    }));
  };
  render() {
    const { images, isLoading } = this.props;
    const { selectedIndex, lightboxIsOpen } = this.state;

    return (
      <Fragment>
        {!isLoading ? (
          <Gallery>
            {images.map(({ author, caption, source }, j) => (
              <Image onClick={() => this.toggleLightbox(j)} key={source.thumbnail}>
                <img
                  alt={caption}
                  src={source.thumbnail}
                  css={{
                    cursor: 'pointer',
                    position: 'absolute',
                    maxWidth: '100%',
                  }}
                />
              </Image>
            ))}
          </Gallery>
        ) : null}

        <ModalGateway>
          {lightboxIsOpen && !isLoading ? (
            <Modal onClose={this.toggleLightbox}>
              <Carousel
                components={{ FooterCaption }}
                currentIndex={selectedIndex}
                formatters={{ getAltText }}
                frameProps={{ autoSize: 'height' }}
                views={images}
              />
            </Modal>
          ) : null}
        </ModalGateway>
      </Fragment>
    );
  }
}

const gutter = 2;

const Gallery = (props: any) => (
  <div
    css={{
      overflow: 'hidden',
      marginLeft: -gutter,
      marginRight: -gutter,
    }}
    {...props}
  />
);

const Image = (props: any) => (
  <div
    css={{
      backgroundColor: '#eee',
      boxSizing: 'border-box',
      float: 'left',
      margin: gutter,
      overflow: 'hidden',
      paddingBottom: '16%',
      position: 'relative',
      width: `calc(25% - ${gutter * 2}px)`,

      ':hover': {
        opacity: 0.9,
      },
    }}
    {...props}
  />
);
...