Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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} fluid={item.fluid} alt="" />
- </div>
- ))}
- </Swiper>
- </div>
- )}
- </>
- )
- }
- }
- export default VacancyGallery
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement