honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-03-02 01:39:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

React-Slider-Swiper enhancement, allows multiple swiper web parts to be added on one page (#419)

Browse Source
This commit is contained in:
Velin Georgiev 2018-02-26 08:00:49 +00:00 committed by Vesa Juvonen
parent f421c5cd3b
commit 9ae451514f
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/ReactSlideSwiper.tsx
View File

@ -9,10 +9,14 @@ import Card from './Card/Card';
const Swiper = require('swiper/dist/js/swiper.min'); const Swiper = require('swiper/dist/js/swiper.min');
export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperProps, IReactSlideSwiperState> { export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperProps, IReactSlideSwiperState> {
private uniqueId: number;
constructor(props: IReactSlideSwiperProps) { constructor(props: IReactSlideSwiperProps) {
super(props); super(props);
this.state = { listItems: [] }; this.state = { listItems: [] };
this.uniqueId = Math.floor(Math.random() * 10000) + 1;
} }
public componentDidMount(): void { public componentDidMount(): void {
@ -34,7 +38,7 @@ export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperP
return ( return (
<div className={styles.reactSlideSwiper}> <div className={styles.reactSlideSwiper}>
<div className={`swiper-container ${styles.container}`}> <div className={`swiper-container ${styles.container} container-${this.uniqueId}`}>
<div className='swiper-wrapper'> <div className='swiper-wrapper'>
{this.state.listItems.length && {this.state.listItems.length &&
this.state.listItems.map((listItem, i) => { this.state.listItems.map((listItem, i) => {
@ -47,14 +51,14 @@ export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperP
</div> </div>
{this.props.swiperOptions.enableNavigation && {this.props.swiperOptions.enableNavigation &&
<div className="swiper-button-next"></div> <div className={`swiper-button-next next-${this.uniqueId}`}></div>
} }
{this.props.swiperOptions.enableNavigation && {this.props.swiperOptions.enableNavigation &&
<div className="swiper-button-prev"></div> <div className={`swiper-button-prev prev-${this.uniqueId}`}></div>
} }
{this.props.swiperOptions.enablePagination !== false && {this.props.swiperOptions.enablePagination !== false &&
<div className="swiper-pagination"></div> <div className={`swiper-pagination pagination-${this.uniqueId}`}></div>
} }
</div> </div>
</div> </div>
@ -93,7 +97,7 @@ export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperP
if (opts.enablePagination !== false) { if (opts.enablePagination !== false) {
options.pagination = { options.pagination = {
el: '.swiper-pagination', el: `.pagination-${this.uniqueId}`,
clickable: true, clickable: true,
}; };
} }
@ -101,8 +105,8 @@ export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperP
if (opts.enableNavigation) { if (opts.enableNavigation) {
options.navigation = { options.navigation = {
nextEl: '.swiper-button-next', nextEl: `.next-${this.uniqueId}`,
prevEl: '.swiper-button-prev', prevEl: `.prev-${this.uniqueId}`,
}; };
} }
@ -114,6 +118,6 @@ export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperP
}; };
} }
return new Swiper('.swiper-container', options); return new Swiper(`.container-${this.uniqueId}`, options);
} }
} }