1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- import { Carousel } from 'antd'
- import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
- import defaultPhoto from '../../materials/default-photo.png'
- import backendURL from '../../helpers/backendUrl'
- const SampleNextArrow = (props) => {
- const { onClick } = props
- return (
- <div className="NextArrow" onClick={onClick}>
- <RightCircleFilled />
- </div>
- )
- }
- const SamplePrevArrow = (props) => {
- const { onClick } = props
- return (
- <div className="PreviousArrow" onClick={onClick}>
- <LeftCircleFilled />
- </div>
- )
- }
- export const MyCarousel = ({ images = [], carouselWidth, carouselHeight }) => {
- return (
- <>
- <div className="MyCarousel">
- <Carousel
- effect="fade"
- arrows
- nextArrow={<SampleNextArrow />}
- prevArrow={<SamplePrevArrow />}
- >
- {images ? (
- images?.map(
- (i, index) =>
- i?.url && (
- <div key={index}>
- <img
- key={index}
- className="PostImage"
- src={backendURL + '/' + i?.url}
- />
- </div>
- ),
- )
- ) : (
- <div>
- <img className="PostImage" src={defaultPhoto} />
- </div>
- )}
- </Carousel>
- </div>
- </>
- )
- }
|