src/components/SingleJob/VacancyGallery.js

import React, { Component } from 'react'
import Swiper from 'react-id-swiper'
import styles from './VacancyGallery.module.scss'
import Img from 'gatsby-image'

class VacancyGallery extends Component {
  state = { activeImageUrl: null }

  componentDidMount = () => {
    const { photo } = this.props
    if (photo.length > 0) {
      this.setState({
        activeImageUrl: photo[0].url,
      })
    }
  }

  chooseActiveImage = (url) => {
    this.setState({ activeImageUrl: url })
  }

  openActiveImage = (url) => {
    if (typeof window !== 'undefined') window.open(url, '_blank')
  }

  render() {
    const sliderParams = {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: false,
      autoplay: true,
      rebuildOnUpdate: false,
      preventClicks: false,
      preventClicksPropagation: false,
      breakpoints: {
        1200: {
          slidesPerView: 3,
        },
        860: {
          slidesPerView: 2,
          slidesPerGroup: 2,
        },
      },
    }

    const { photo } = this.props
    return (
      <>
        {photo.length > 0 && (
          <div className={styles.root}>
            <div className={styles.activeImageWrapper} onClick={() => this.openActiveImage(this.state.activeImageUrl)}>
              <Img className={styles.activeImage} fluid={this.props.photo[0].fluid} alt="" />
            </div>

            <Swiper {...sliderParams}>
              {photo.map((item, index) => (
                <div onClick={() => this.chooseActiveImage(item.url)} className={styles.slide} key={index}>
                  <img className={styles.img} src={item.url} alt="" />
                </div>
              ))}
            </Swiper>
          </div>
        )}
      </>
    )
  }
}

export default VacancyGallery