120 | );
121 | };
122 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | [](https://www.npmjs.com/package/rerousel) [ ](https://www.npmjs.com/package/rerousel)
10 |
11 | ### Rerousel - the simplest and lightest infinite carousel package made for React.
12 | - Simple: Need a carousel component for your website or app? Tired of looking for something decent on Codepen? With Rerousel you can set it up in the blink of an eye!
13 | - Lightweight: Rerousel is the lightest infinite React carousel available for download from NPM because it uses only a couple of vital packages. You don’t have to worry about thousands of dependencies flooding your application!
14 | - Versatile: Whether you want to show off your products, brag with customer reviews, or even set up a collage of holiday pictures - Rerousel is there for you.
15 | It supports all types of JSX elements, so you don't have to worry about compatibility. It doesn't have to be an infinite carousel - you can simply set up a custom stop point using the `stop` prop.
16 |
17 | ## Table of contents
18 |
19 | - [Live demo](#live-demo)
20 | - [How to use?](#how-to-use)
21 | - [Props](#props)
22 | - [Contribute](#contribute)
23 | - [Issues](#issues)
24 |
25 | ## Live demo
26 |
27 | You can play around with Rerousel sandbox by checking out [the live demo here](https://rerousel.netlify.app/)
28 |
29 | ## How to use?
30 |
31 | 1. Install the package using this npm command:
32 |
33 | ```
34 | npm install rerousel
35 | ```
36 |
37 | 2. Import Rerousel at the top of the component you want to use it in:
38 |
39 | ```tsx
40 | import { Rerousel } from 'rerousel';
41 | ```
42 |
43 | 3. Place it in the desired position in the html tree and fill it with the items you want to showcase
44 |
45 | ```tsx
46 | export const Component: React.FC = ({ customers }) => {
47 | const customerLogo = useRef(null);
48 |
49 | return (
50 |
51 |
52 | {customers.map((c) => {
53 | return ;
54 | })}
55 |
56 |
57 | );
58 | };
59 | ```
60 |
61 | 4. Create a ref pointing to your outermost item inside of the Rerousel and include it in Rerousel as an `itemRef` prop.
62 | You can also determine the interval using the `interval` prop in **milliseconds**, but you don't have to - the default value is **3 seconds**.
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Required? | Description |
67 | | ------------ | ------------------------ | ----------- | --------- | --------------------------------------------------------------------------------------------- |
68 | | **itemRef** | _RefObject_ | `undefined` | Yes | Reference to the outermost item of the carousel - used to retrieve information about the item's total width |
69 | | **interval** | _Number_ | `3000` | No | Interval length in milliseconds |
70 | | **stop** | _Boolean_ | `false` | No | Should the carousel stop? |
71 |
72 | ## Contribute
73 |
74 | 1. Fork this repo
75 | 2. Create your feature branch: git checkout -b feature-name
76 | 3. Commit your changes: git commit -am 'Add some feature'
77 | 4. Push to the branch: git push origin my-new-feature
78 | 5. Submit a pull request
79 |
80 | ## Issues
81 |
82 | If you encounter any issues when using the **Rerousel** package, please add a new issue - we will get to it as fast as it's possible.
83 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 |
5 | /* Basic Options */
6 | // "incremental": true, /* Enable incremental compilation */
7 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
8 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
9 | // "lib": [], /* Specify library files to be included in the compilation. */
10 | // "allowJs": true, /* Allow javascript files to be compiled. */
11 | // "checkJs": true, /* Report errors in .js files. */
12 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
15 | "sourceMap": true /* Generates corresponding '.map' file. */,
16 | // "outFile": "./", /* Concatenate and emit output to single file. */
17 | // "outDir": "./", /* Redirect output structure to the directory. */
18 | "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
19 | // "composite": true, /* Enable project compilation */
20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
21 | // "removeComments": true, /* Do not emit comments to output. */
22 | "noEmit": true /* Do not emit outputs. */,
23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
25 | "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
26 |
27 | /* Strict Type-Checking Options */
28 | "strict": true /* Enable all strict type-checking options. */,
29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
30 | // "strictNullChecks": true, /* Enable strict null checks. */
31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
36 |
37 | /* Additional Checks */
38 | // "noUnusedLocals": true, /* Report errors on unused locals. */
39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
42 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
43 |
44 | /* Module Resolution Options */
45 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
46 | "baseUrl": "./src" /* Base directory to resolve non-absolute module names. */,
47 | "paths": {
48 | "@/*": ["./*"]
49 | } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
50 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
51 | // "typeRoots": [], /* List of folders to include type definitions from. */
52 | // "types": [], /* Type declaration files to be included in compilation. */
53 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
54 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
55 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
56 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
57 |
58 | /* Source Map Options */
59 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
60 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
61 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
62 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
63 |
64 | /* Experimental Options */
65 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
66 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
67 |
68 | /* Advanced Options */
69 | "skipLibCheck": true /* Skip type checking of declaration files. */,
70 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
71 | "include": ["src/components", "src/custom.d.ts"]
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 |
5 | /* Basic Options */
6 | // "incremental": true, /* Enable incremental compilation */
7 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
8 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
9 | // "lib": [], /* Specify library files to be included in the compilation. */
10 | // "allowJs": true, /* Allow javascript files to be compiled. */
11 | // "checkJs": true, /* Report errors in .js files. */
12 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
13 | "declaration": true /* Generates corresponding '.d.ts' file. */,
14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
15 | "sourceMap": true /* Generates corresponding '.map' file. */,
16 | // "outFile": "./", /* Concatenate and emit output to single file. */
17 | "outDir": "./lib" /* Redirect output structure to the directory. */,
18 | "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
19 | // "composite": true, /* Enable project compilation */
20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
21 | // "removeComments": true, /* Do not emit comments to output. */
22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
24 | "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
25 |
26 | /* Strict Type-Checking Options */
27 | "strict": true /* Enable all strict type-checking options. */,
28 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
29 | // "strictNullChecks": true, /* Enable strict null checks. */
30 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
31 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
32 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
33 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
34 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
35 |
36 | /* Additional Checks */
37 | // "noUnusedLocals": true, /* Report errors on unused locals. */
38 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
39 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
40 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
41 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
42 |
43 | /* Module Resolution Options */
44 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
45 | "baseUrl": "./src" /* Base directory to resolve non-absolute module names. */,
46 | "paths": {
47 | "@/*": ["./*"]
48 | } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
49 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
50 | // "typeRoots": [], /* List of folders to include type definitions from. */
51 | // "types": [], /* Type declaration files to be included in compilation. */
52 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
53 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
54 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
55 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
56 |
57 | /* Source Map Options */
58 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
59 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
60 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
61 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
62 |
63 | /* Experimental Options */
64 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
65 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
66 |
67 | /* Advanced Options */
68 | "skipLibCheck": true /* Skip type checking of declaration files. */,
69 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
70 | "plugins": [
71 | {
72 | "transform": "typescript-transform-paths"
73 | },
74 | {
75 | "transform": "typescript-transform-paths",
76 | "afterDeclarations": true
77 | }
78 | ]
79 | },
80 | "exclude": ["**/__tests__/*", "**/__sandbox__/*"]
81 | }
82 |
--------------------------------------------------------------------------------
/src/__sandbox__/components/Clients.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 | import styled from 'styled-components';
3 | import { Rerousel } from '@/index';
4 | import { media, style } from 'typestyle';
5 | import { clientCarouselItems as clients } from '../assets/data';
6 |
7 | const Background = styled.div`
8 | max-width: 1150px;
9 | margin: auto;
10 | margin-top: 120px;
11 | `;
12 |
13 | const Header = styled.h1`
14 | text-align: center;
15 | font-family: Raleway, sans-serif;
16 | `;
17 |
18 | const WrapperItem = styled.div`
19 | padding: 0 0 50px 0;
20 | width: calc(100% / 3);
21 |
22 | @media (max-width: 1400px) {
23 | width: calc(100% / 2);
24 | }
25 |
26 | @media (max-width: 1000px) {
27 | width: 100%;
28 | }
29 | `;
30 |
31 | const Item = styled.div`
32 | background-color: #282c34;
33 | display: flex;
34 | border-radius: 10px;
35 | flex-flow: column nowrap;
36 | justify-content: center;
37 | align-items: center;
38 | padding: 50px;
39 | margin: 30px;
40 | `;
41 |
42 | const PersonInfo = styled.div`
43 | text-align: center;
44 | font-family: Raleway, sans-serif;
45 | color: white;
46 | `;
47 |
48 | const Img = styled.div<{ image: string }>`
49 | width: 88px;
50 | height: 88px;
51 | background-size: cover;
52 | background-repeat: no-repeat;
53 | background-position: center center;
54 | background-image: ${({ image }) => `url(${image})`};
55 | margin: 0 auto;
56 | `;
57 |
58 | const Name = styled.h3`
59 | font-weight: bold;
60 | font-size: 30px;
61 | line-height: 50px;
62 | border-bottom: white solid 2px;
63 | margin: 20px 0 10px 0;
64 | `;
65 |
66 | const Role = styled.h3`
67 | font-weight: 500;
68 | font-size: 25px;
69 | margin: 10px 0 20px 0;
70 | `;
71 |
72 | const Paragraph = styled.p`
73 | text-align: justify;
74 | color: white;
75 | font-family: Raleway, sans-serif;
76 | font-style: italic;
77 | line-height: 22px;
78 | `;
79 |
80 | const Button = style(
81 | {
82 | height: '60px',
83 | width: '200px',
84 | backgroundColor: 'transparent',
85 | border: '4px solid #61DAFB',
86 | borderRadius: '10px',
87 | fontFamily: 'Signika, sans-serif',
88 | color: '#000',
89 | fontSize: '18px',
90 | fontWeight: 'lighter',
91 | transition: '0.5s',
92 | marginTop: '20px',
93 | cursor: 'pointer',
94 | marginBottom: '30px',
95 | $nest: {
96 | '&:hover': {
97 | backgroundColor: '#61DAFB',
98 | },
99 | },
100 | },
101 | media({ maxWidth: 800 }, { marginTop: '10px', height: '50px', width: '200px', fontSize: '15px' }),
102 | );
103 |
104 | const ButtonTwo = style(
105 | {
106 | height: '60px',
107 | width: '100px',
108 | backgroundColor: 'transparent',
109 | border: '4px solid black',
110 | borderRadius: '10px',
111 | fontFamily: 'Signika, sans-serif',
112 | color: '#000',
113 | fontSize: '18px',
114 | fontWeight: 'lighter',
115 | transition: '0.5s',
116 | marginTop: '20px',
117 | cursor: 'pointer',
118 | marginBottom: '30px',
119 | $nest: {
120 | '&:hover': {
121 | backgroundColor: 'black',
122 | color: 'white',
123 | },
124 | },
125 | },
126 | media({ maxWidth: 800 }, { marginTop: '10px', height: '50px', width: '200px', fontSize: '15px' }),
127 | );
128 |
129 | const Input = styled.input`
130 | margin-top: 20px;
131 | padding: 10px 50px;
132 | width: 350px;
133 | border: 2px solid black;
134 | box-sizing: border-box;
135 | text-align: center;
136 | font-size: 20px;
137 | font-weight: bold;
138 | font-family: Raleway, sans-serif;
139 | font-variant-numeric: lining-nums;
140 | letter-spacing: 2px;
141 |
142 | /* Chrome, Safari, Edge, Opera */
143 | &::-webkit-outer-spin-button,
144 | &::-webkit-inner-spin-button {
145 | -webkit-appearance: none;
146 | margin: 0;
147 | }
148 |
149 | /* Firefox */
150 | &[type='number'] {
151 | -moz-appearance: textfield;
152 | }
153 | `;
154 |
155 | const ButtonContainer = styled.div`
156 | display: flex;
157 | width: 350px;
158 | justify-content: space-between;
159 | `;
160 |
161 | const ControllerHolder = styled.div`
162 | font-family: Raleway, sans-serif;
163 | font-size: 20px;
164 | font-weight: bold;
165 | display: flex;
166 | justify-content: center;
167 | align-items: center;
168 | flex-direction: column;
169 | `;
170 |
171 | export const Clients = () => {
172 | const [inputValue, setInputValue] = useState();
173 | const [carouselInterval, setCarouselInterval] = useState(3000);
174 | const [carouselStop, setCarouselStop] = useState(false);
175 | const outermostItemRef = useRef(null);
176 |
177 | return (
178 |
179 | Testimonials carousel
180 |
181 | {clients.map((c) => {
182 | console.log(c.image);
183 | return (
184 |
185 |
186 |
187 |
188 | {c.name}
189 | {c.job}
190 |
191 | {c.content}
192 |
193 |
194 | );
195 | })}
196 |
197 |
198 | Set custom interval:
199 | setInputValue(parseInt(e.currentTarget.value))} />
200 |
201 |
204 |
207 |
208 |
209 |
210 | );
211 | };
212 |
--------------------------------------------------------------------------------
/src/__sandbox__/assets/data.ts:
--------------------------------------------------------------------------------
1 | import Client1 from './images/client1.png';
2 | import Client2 from './images/client2.png';
3 | import Client3 from './images/client3.png';
4 | import Client4 from './images/client4.png';
5 | import Client5 from './images/client5.png';
6 |
7 | export const FullWidthCarouselData = [
8 | {
9 | itemHeader: 'Item 1',
10 | itemContent:
11 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
12 | },
13 |
14 | {
15 | itemHeader: 'Item 2',
16 | itemContent:
17 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
18 | },
19 |
20 | {
21 | itemHeader: 'Item 3',
22 | itemContent:
23 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
24 | },
25 |
26 | {
27 | itemHeader: 'Item 4',
28 | itemContent:
29 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
30 | },
31 |
32 | {
33 | itemHeader: 'Item 5',
34 | itemContent:
35 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
36 | },
37 | ];
38 |
39 | export const CustomWidthCarouselData = [
40 | {
41 | itemHeader: 'Item 1',
42 | itemContent:
43 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
44 | },
45 |
46 | {
47 | itemHeader: 'Item 2',
48 | itemContent:
49 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
50 | },
51 |
52 | {
53 | itemHeader: 'Item 3',
54 | itemContent:
55 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
56 | },
57 |
58 | {
59 | itemHeader: 'Item 4',
60 | itemContent:
61 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
62 | },
63 |
64 | {
65 | itemHeader: 'Item 5',
66 | itemContent:
67 | 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
68 | },
69 | ];
70 |
71 | export const wordCarouselItems = ['SIMPLCITY', 'LIGHTNESS', 'ACCESSIBILITY', 'VERSATILITY', 'INFINITY', 'RELIABILITY'];
72 |
73 | export const descriptionData = [
74 | {
75 | header: 'SIMPLICITY',
76 | description:
77 | 'Set up your carousel in the blink of an eye. All you have to do is installing the package and the component is ready to use!',
78 | },
79 | {
80 | header: 'VERSATILITY',
81 | description:
82 | "Show off your products or holiday pictures - Rerousel supports all types of JSX elements, so you don't have to worry about compatibility.",
83 | },
84 | {
85 | header: 'LIGHTNESS',
86 | description:
87 | 'Rerousel is the lightest working infinite react carousel available to download from the NPM, using only the packages that are necessary. ',
88 | },
89 | ];
90 |
91 | export const clientCarouselItems = [
92 | {
93 | name: 'John Smith',
94 | job: 'Client',
95 | content:
96 | '“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed turpis sed ipsum tincidunt consectetur. Nulla egestas libero egestas, pretium velit sit amet, dictum eros.”',
97 | image: Client1,
98 | },
99 | {
100 | name: 'Kate Windle',
101 | job: 'Client',
102 | content:
103 | '“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed turpis sed ipsum tincidunt consectetur. Nulla egestas libero egestas, pretium velit sit amet, dictum eros.”',
104 | image: Client2,
105 | },
106 | {
107 | name: 'Judith Locke',
108 | job: 'Client',
109 | content:
110 | '“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed turpis sed ipsum tincidunt consectetur. Nulla egestas libero egestas, pretium velit sit amet, dictum eros.”',
111 | image: Client3,
112 | },
113 | {
114 | name: 'Carol Berkley',
115 | job: 'Client',
116 | content:
117 | '“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed turpis sed ipsum tincidunt consectetur. Nulla egestas libero egestas, pretium velit sit amet, dictum eros.”',
118 | image: Client4,
119 | },
120 | ];
121 |
--------------------------------------------------------------------------------
/src/__sandbox__/assets/images/rerousel-logo.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/__sandbox__/assets/images/RerouselLogoDark.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/__sandbox__/assets/images/RerouselLogoLight.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------