@ryusei/code
Version:
<div align="center"> <a href="https://code.ryuseijs.com"> <img alt="RyuseiCode" src="https://code.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
110 lines (97 loc) • 2.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSX</title>
<link href="../../../../dist/css/themes/ryuseicode-ryusei.min.css" rel="stylesheet">
</head>
<body style="margin: 1em ">
<pre id="code">
import React from 'react';
import { Splide, SplideSlide } from '../../../../src/js';
import { createSlides } from "../utils/slides";
/**
* The class for the thumbnail slider example.
* Need to call sync() after the component is mounted, using refs.
*/
export default class ThumbnailsExample extends React.Component {
/**
* ThumbnailExample constructor.
*
* @param {Object} props - Props.
*/
constructor( props ) {
super( props );
this.primaryRef = React.createRef();
this.secondaryRef = React.createRef();
}
/**
* Set the sync target right after the component is mounted.
*/
componentDidMount() {
this.primaryRef.current.sync( this.secondaryRef.current.splide );
}
/**
* Render slides.
*
* @return {ReactNode[]}
*/
renderSlides() {
return createSlides().map( slide => (
<SplideSlide key={ slide.src }>
<img src={ slide.src } alt={ slide.alt } />
</SplideSlide>
) );
};
/**
* Render the component.
*
* @return {ReactNode} - React component.
*/
render() {
const primaryOptions = {
type : 'loop',
perPage : 2,
perMove : 1,
gap : '1rem',
pagination: false,
};
const secondaryOptions = {
type : 'slide',
rewind : true,
gap : '1rem',
pagination : false,
fixedWidth : 110,
fixedHeight : 70,
cover : true,
focus : 'center',
isNavigation: true,
updateOnMove: true,
};
return (
<div className="wrapper">
<h2>Thumbnail Slider</h2>
<a
href="https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/ThumbnailsExample.jsx"
target="_blank"
rel="noopener"
>
View Code
</a>
<Splide options={ primaryOptions } ref={ this.primaryRef }>
{ this.renderSlides() }
</Splide>
<Splide options={ secondaryOptions } ref={ this.secondaryRef }>
{ this.renderSlides() }
</Splide>
</div>
);
}
}</pre>
<script src="../../../../dist/js/ryuseicode-extensions.min.js"></script>
<script src="../../../../dist/js/languages/jsx.min.js"></script>
<script>
new RyuseiCode( { language: 'jsx' } ).apply( '#code' );
</script>
</body>
</html>