41 |
42 | )
43 | }
44 |
45 | export default Dots
46 |
--------------------------------------------------------------------------------
/doc-components/DynamicContent.js:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react'
2 | import ReactSlidy from '../src/index'
3 | import Number from './Number'
4 |
5 | const DynamicContent = () => {
6 | const [slides, setSlides] = useState([0])
7 | const slidesToRender = slides.map((_, index) => (
8 |
9 | ))
10 |
11 | return (
12 | <>
13 |
14 | {slidesToRender}
15 |
16 | )
17 | }
18 |
19 | export default DynamicContent
20 |
--------------------------------------------------------------------------------
/doc-components/GitHub.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | export default function GitHubBadge({
5 | slug,
6 | width = 36,
7 | height = 36,
8 | fill = 'black'
9 | }) {
10 | return (
11 | <>
12 |
17 |
24 |
25 |
33 |
34 | )
35 | }
36 |
37 | GitHubBadge.propTypes = {
38 | slug: PropTypes.string.isRequired,
39 | width: PropTypes.number,
40 | height: PropTypes.number,
41 | fill: PropTypes.string
42 | }
43 |
--------------------------------------------------------------------------------
/doc-components/Number.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const style = {
4 | alignContent: 'center',
5 | alignItems: 'center',
6 | backgroundColor: '#eee',
7 | color: '#888',
8 | display: 'flex',
9 | fontSize: '100px',
10 | height: '250px',
11 | justifyContent: 'center',
12 | textShadow: '2px 2px 0px #aaa',
13 | width: '100%'
14 | }
15 |
16 | export default function Number({num}) {
17 | // eslint-disable-line
18 | return {num}
19 | }
20 |
--------------------------------------------------------------------------------
/doc-components/using-events.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: with Events
3 | ---
4 |
5 | # Examples with Events
6 |
7 | import {Fragment, useState} from 'react'
8 | import { Playground, Props } from 'docz'
9 | import ReactSlidy from '../index.js'
10 | import Number from '../examples/Number'
11 | import '../index.scss'
12 |
13 | You could use `doBeforeSlide`, `doAfterSlide` and `doAfterDestroy` events to execute callbacks when some events are ocurring with the slider.
14 |
15 | ## doAfterInit
16 |
17 | Callback that will be executed after initializing the slider
18 |
19 |
20 | alert(`The slider is initialized`)}>
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | ## doBeforeSlide
29 |
30 | Callback that will be executed BEFORE the slide transition has been completed.
31 |
32 |
33 | alert(`The next slide is the number ${nextSlide} and the current is ${currentSlide}`)}>
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | ## doAfterSlide
42 |
43 | Callback that will be executed AFTER the slide transition has been completed.
44 |
45 |
46 | alert(`The next slide is the number ${currentSlide}`)}>
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | ## doAfterDestroy
55 |
56 | Do you need to perform some clean up? You could use the `doAfterDestroy` callback that will be executed AFTER the slider is destroyed.
57 |
58 |
59 | {() => {
60 | const [render, setRender] = useState(true)
61 |
62 | return (
63 |
64 |
67 | {
68 | render && alert('slider destroyed!')}>
69 |
70 |
71 |
72 |
73 |
74 | }
75 |
76 | )
77 | }}
78 |
79 |
80 | Created and mantained by [midudev](https://midu.dev)
--------------------------------------------------------------------------------
/doc-components/using-full-container.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: with Full Container usage
3 | ---
4 |
5 | # Examples with full container height
6 |
7 | import {Fragment, useState} from 'react'
8 | import { Playground, Props } from 'docz'
9 | import ReactSlidy from '../index.js'
10 | import Number from '../examples/Number'
11 | import '../index.scss'
12 |
13 |
14 |
WITHOUT useFullHeight prop
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | El panda, oso panda o panda gigante (Ailuropoda melanoleuca) es una especie de mamífero del orden de los carnívoros y aunque hay una gran controversia al respecto, los últimos estudios de su ADN lo engloban entre los miembros de la familia de los osos (Ursidae), siendo el oso de anteojos su pariente más cercano, si bien este pertenece a la subfamilia de los tremarctinos. Por otro lado, el panda rojo pertenece a una familia propia e independiente; Ailuridae.
25 |
26 |
27 |
WITH useFullHeight prop
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | El panda, oso panda o panda gigante (Ailuropoda melanoleuca) es una especie de mamífero del orden de los carnívoros y aunque hay una gran controversia al respecto, los últimos estudios de su ADN lo engloban entre los miembros de la familia de los osos (Ursidae), siendo el oso de anteojos su pariente más cercano, si bien este pertenece a la subfamilia de los tremarctinos. Por otro lado, el panda rojo pertenece a una familia propia e independiente; Ailuridae.
38 |
39 |
40 |
WITH useFullHeight AND imageObjectFit to 'cover' prop
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | El panda, oso panda o panda gigante (Ailuropoda melanoleuca) es una especie de mamífero del orden de los carnívoros y aunque hay una gran controversia al respecto, los últimos estudios de su ADN lo engloban entre los miembros de la familia de los osos (Ursidae), siendo el oso de anteojos su pariente más cercano, si bien este pertenece a la subfamilia de los tremarctinos. Por otro lado, el panda rojo pertenece a una familia propia e independiente; Ailuridae.
51 |
52 |
53 |
WITH useFullHeight AND imageObjectFit to 'contain' prop
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | El panda, oso panda o panda gigante (Ailuropoda melanoleuca) es una especie de mamífero del orden de los carnívoros y aunque hay una gran controversia al respecto, los últimos estudios de su ADN lo engloban entre los miembros de la familia de los osos (Ursidae), siendo el oso de anteojos su pariente más cercano, si bien este pertenece a la subfamilia de los tremarctinos. Por otro lado, el panda rojo pertenece a una familia propia e independiente; Ailuridae.
64 |
65 |
66 |
67 |
68 | Created and mantained by [midudev](https://midu.dev)
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * For a detailed explanation regarding each configuration property, visit:
3 | * https://jestjs.io/docs/en/configuration.html
4 | */
5 |
6 | module.exports = {
7 | // All imported modules in your tests should be mocked automatically
8 | // automock: false,
9 |
10 | // Stop running tests after `n` failures
11 | // bail: 0,
12 |
13 | // The directory where Jest should store its cached dependency information
14 | // cacheDirectory: "/private/var/folders/yz/d_2f89857v15v1s02h8rwdg00000gn/T/jest_dx",
15 |
16 | // Automatically clear mock calls and instances between every test
17 | clearMocks: true,
18 |
19 | // Indicates whether the coverage information should be collected while executing the test
20 | // collectCoverage: false,
21 |
22 | // An array of glob patterns indicating a set of files for which coverage information should be collected
23 | // collectCoverageFrom: undefined,
24 |
25 | // The directory where Jest should output its coverage files
26 | coverageDirectory: "coverage",
27 |
28 | // An array of regexp pattern strings used to skip coverage collection
29 | // coveragePathIgnorePatterns: [
30 | // "/node_modules/"
31 | // ],
32 |
33 | // Indicates which provider should be used to instrument code for coverage
34 | // coverageProvider: "babel",
35 |
36 | // A list of reporter names that Jest uses when writing coverage reports
37 | // coverageReporters: [
38 | // "json",
39 | // "text",
40 | // "lcov",
41 | // "clover"
42 | // ],
43 |
44 | // An object that configures minimum threshold enforcement for coverage results
45 | // coverageThreshold: undefined,
46 |
47 | // A path to a custom dependency extractor
48 | // dependencyExtractor: undefined,
49 |
50 | // Make calling deprecated APIs throw helpful error messages
51 | // errorOnDeprecated: false,
52 |
53 | // Force coverage collection from ignored files using an array of glob patterns
54 | // forceCoverageMatch: [],
55 |
56 | // A path to a module which exports an async function that is triggered once before all test suites
57 | // globalSetup: undefined,
58 |
59 | // A path to a module which exports an async function that is triggered once after all test suites
60 | // globalTeardown: undefined,
61 |
62 | // A set of global variables that need to be available in all test environments
63 | // globals: {},
64 |
65 | // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
66 | // maxWorkers: "50%",
67 |
68 | // An array of directory names to be searched recursively up from the requiring module's location
69 | // moduleDirectories: [
70 | // "node_modules"
71 | // ],
72 |
73 | // An array of file extensions your modules use
74 | // moduleFileExtensions: [
75 | // "js",
76 | // "json",
77 | // "jsx",
78 | // "ts",
79 | // "tsx",
80 | // "node"
81 | // ],
82 |
83 | // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
84 | // moduleNameMapper: {},
85 |
86 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
87 | // modulePathIgnorePatterns: [],
88 |
89 | // Activates notifications for test results
90 | // notify: false,
91 |
92 | // An enum that specifies notification mode. Requires { notify: true }
93 | // notifyMode: "failure-change",
94 |
95 | // A preset that is used as a base for Jest's configuration
96 | // preset: undefined,
97 |
98 | // Run tests from one or more projects
99 | // projects: undefined,
100 |
101 | // Use this configuration option to add custom reporters to Jest
102 | // reporters: undefined,
103 |
104 | // Automatically reset mock state between every test
105 | // resetMocks: false,
106 |
107 | // Reset the module registry before running each individual test
108 | // resetModules: false,
109 |
110 | // A path to a custom resolver
111 | // resolver: undefined,
112 |
113 | // Automatically restore mock state between every test
114 | // restoreMocks: false,
115 |
116 | // The root directory that Jest should scan for tests and modules within
117 | // rootDir: undefined,
118 |
119 | // A list of paths to directories that Jest should use to search for files in
120 | // roots: [
121 | // ""
122 | // ],
123 |
124 | // Allows you to use a custom runner instead of Jest's default test runner
125 | // runner: "jest-runner",
126 |
127 | // The paths to modules that run some code to configure or set up the testing environment before each test
128 | // setupFiles: [],
129 |
130 | // A list of paths to modules that run some code to configure or set up the testing framework before each test
131 | // setupFilesAfterEnv: [],
132 |
133 | // The number of seconds after which a test is considered as slow and reported as such in the results.
134 | // slowTestThreshold: 5,
135 |
136 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing
137 | // snapshotSerializers: [],
138 |
139 | // The test environment that will be used for testing
140 | // testEnvironment: "jest-environment-jsdom",
141 |
142 | // Options that will be passed to the testEnvironment
143 | // testEnvironmentOptions: {},
144 |
145 | // Adds a location field to test results
146 | // testLocationInResults: false,
147 |
148 | // The glob patterns Jest uses to detect test files
149 | // testMatch: [
150 | // "**/__tests__/**/*.[jt]s?(x)",
151 | // "**/?(*.)+(spec|test).[tj]s?(x)"
152 | // ],
153 |
154 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
155 | // testPathIgnorePatterns: [
156 | // "/node_modules/"
157 | // ],
158 |
159 | // The regexp pattern or array of patterns that Jest uses to detect test files
160 | // testRegex: [],
161 |
162 | // This option allows the use of a custom results processor
163 | // testResultsProcessor: undefined,
164 |
165 | // This option allows use of a custom test runner
166 | // testRunner: "jasmine2",
167 |
168 | // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
169 | // testURL: "http://localhost",
170 |
171 | // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
172 | // timers: "real",
173 |
174 | // A map from regular expressions to paths to transformers
175 | // transform: undefined,
176 |
177 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
178 | // transformIgnorePatterns: [
179 | // "/node_modules/",
180 | // "\\.pnp\\.[^\\/]+$"
181 | // ],
182 |
183 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
184 | // unmockedModulePathPatterns: undefined,
185 |
186 | // Indicates whether each individual test should be reported during the run
187 | // verbose: undefined,
188 |
189 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
190 | // watchPathIgnorePatterns: [],
191 |
192 | // Whether to use watchman for file crawling
193 | // watchman: true,
194 | };
195 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withMDX = require('@next/mdx')({
2 | extension: /\.mdx?$/
3 | })
4 |
5 | module.exports = withMDX()
6 |
--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "alias": ["react-slidy.now.sh", "react-slidy.midu.dev"],
4 | "name": "react-slidy"
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-slidy",
3 | "version": "4.3.3",
4 | "main": "lib/",
5 | "keywords": [
6 | "slider",
7 | "react",
8 | "lory",
9 | "slidy",
10 | "react-lory",
11 | "react-slidy",
12 | "slider react",
13 | "react slider"
14 | ],
15 | "scripts": {
16 | "dev": "next",
17 | "build": "next build",
18 | "start": "next start",
19 | "clean:lib": "rimraf ./lib/*",
20 | "lib": "npm run lib:scripts && npm run lib:styles && npm run lib:css",
21 | "lib:scripts": "babel src --out-dir lib --presets=babel-preset-sui",
22 | "lib:styles": "copyfiles -u 1 './src/**/*.scss' lib",
23 | "lib:css": "sass ./src/index.scss ./lib/styles.css",
24 | "lint": "npm run lint:js && npm run lint:sass",
25 | "lint:js": "sui-lint js",
26 | "lint:sass": "sui-lint sass",
27 | "prelib": "npm run clean:lib -s",
28 | "release": "np --no-cleanup",
29 | "prepare": "npm run lib",
30 | "test": "jest",
31 | "test:watch": "jest --watch"
32 | },
33 | "license": "MIT",
34 | "repository": {
35 | "type": "git",
36 | "url": "git@github.com:midudev/react-slidy.git"
37 | },
38 | "peerDependencies": {
39 | "prop-types": "15",
40 | "react": ">= 16.8.0",
41 | "react-dom": ">= 16.8.0"
42 | },
43 | "devDependencies": {
44 | "@babel/cli": "7.16.8",
45 | "@babel/core": "7.16.7",
46 | "@babel/preset-env": "^7.16.8",
47 | "@mdx-js/loader": "1.6.22",
48 | "@next/mdx": "10.2.0",
49 | "@s-ui/lint": "3",
50 | "@size-limit/preset-small-lib": "4.10.2",
51 | "@testing-library/react": "11.2.7",
52 | "babel-jest": "26.6.3",
53 | "babel-preset-sui": "3",
54 | "copyfiles": "2.4.1",
55 | "jest": "26.6.3",
56 | "next": "12.0.7",
57 | "np": "7.5.0",
58 | "prism-react-renderer": "1.2.1",
59 | "prop-types": "15",
60 | "react": "17.0.2",
61 | "react-dom": "17.0.2",
62 | "rimraf": "3.0.2",
63 | "sass": "1.47.0",
64 | "size-limit": "4.10.2"
65 | },
66 | "dependencies": {
67 | "intersection-observer": "0.10.0"
68 | },
69 | "pre-commit": [
70 | "lint"
71 | ],
72 | "eslintConfig": {
73 | "extends": [
74 | "./node_modules/@s-ui/lint/eslintrc.js"
75 | ]
76 | },
77 | "prettier": "./node_modules/@s-ui/lint/.prettierrc.js",
78 | "stylelint": {
79 | "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
80 | },
81 | "size-limit": [
82 | {
83 | "limit": "3 KB",
84 | "path": "lib/*.js"
85 | }
86 | ]
87 | }
88 |
--------------------------------------------------------------------------------
/pages/_app.jsx:
--------------------------------------------------------------------------------
1 | import '../src/index.scss'
2 |
3 | export default function MyApp({Component, pageProps}) { // eslint-disable-line
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Head from 'next/head'
3 | import {MDXProvider} from '@mdx-js/react'
4 |
5 | import IndexMDX from './index.mdx'
6 | import CodeBlock from '../doc-components/CodeBlock'
7 | import GitHubBagdge from '../doc-components/GitHub'
8 |
9 | const components = {
10 | pre: props => ,
11 | code: CodeBlock
12 | }
13 |
14 | const Home = () => (
15 |
16 |
17 |
18 | React Slidy 🍃 - a simple and minimal slider component for React
19 |
20 |
24 |
25 |
26 |
27 |
28 |
46 |
47 | )
48 |
49 | export default Home
50 |
--------------------------------------------------------------------------------
/pages/index.mdx:
--------------------------------------------------------------------------------
1 | # React Slidy 🍃
2 |
3 | #### a minimal and optimal slider for React ⚛️ in ~1KB +1KB if intersection-observer polyfill if needed
4 |
5 | import ReactSlidy from '../src/index'
6 | import Api from '../doc-components/Api'
7 | import DynamicContent from '../doc-components/DynamicContent'
8 | import Dots from '../doc-components/Dots'
9 | import Number from '../doc-components/Number'
10 | import {CustomArrowLeft, CustomArrowRight} from '../doc-components/CustomArrows'
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | ```js showButton
20 |
21 |
22 |
23 |
24 |
25 |
26 | ```
27 |
28 | ## How to install ℹ️
29 |
30 | Install the latest version of the package:
31 |
32 | ```
33 | npm install react-slidy --save
34 | ```
35 |
36 | Import the component:
37 |
38 | ```js
39 | import ReactSlidy from 'react-slidy'
40 | ```
41 |
42 | Import the styles:
43 |
44 | ```sass
45 | @import '~react-slidy/lib/index';
46 | ```
47 |
48 | or directly in your javascript file if you're using a bundler:
49 |
50 | ```js
51 | import 'react-slidy/lib/index.scss'
52 | // or using the css provided
53 | import 'react-slidy/lib/styles.css'
54 | ```
55 |
56 | you could also load the CSS directly from HTML:
57 |
58 | ```html
59 |
60 |
61 | ```
62 |
63 | ## Customization 👩🎨
64 |
65 | If you're using SASS, you could modify the following variables:
66 |
67 | ```sass
68 | $react-slidy-c-background: transparent !default;
69 | $react-slidy-c-nav-background: rgba(255, 255, 255, .8) !default;
70 | $react-slidy-c-nav-color: #aaaaaa !default;
71 | $react-slidy-c-transparent: rgba(0, 0, 0, 0) !default;
72 | $react-slidy-mh: 50px !default;
73 | $react-slidy-h-image: auto !default;
74 | ```
75 |
76 | ## Examples 📖
77 |
78 | ### Preload all the images 🖼
79 |
80 | The slider is optimized in order to be lazy loaded and, then, load the images only when needed so you could notice an empty image while sliding.
81 | You could preload as much as images as you want by using the `itemsToPreload` in order to avoid that effect if you wish.
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | ```js showButton
91 |
92 |
93 |
94 |
95 |
96 |
97 | ```
98 |
99 | ### Using with React components ⚛️
100 |
101 | You could use the slider with React components. Just put them inside. Every child will be rendered as slide. For example:
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | ```js showButton
111 |
112 |
113 |
114 |
115 |
116 |
117 | ```
118 |
119 | ### Using Keyboard Navigation ⌨️
120 |
121 | You could use the `keyboardNavigation` prop in order to activate keyboard navigation. Try to use the left and right arrow in order to navigate the next slider.
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | ```js showButton
131 |
132 |
133 |
134 |
135 |
136 |
137 | ```
138 |
139 | ### Using an anchor as wrapper 🔗
140 |
141 | While not recommendable, you could wrap the Slider with a clickable element like an anchor, and the next and previous buttons will work as expected while the rest of the slider is clickable.
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 | ```js showButton
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 | ```
162 |
163 | ### Using Dynamic Content ⚡
164 |
165 | You could easily add more content to the slider and it will adapt automatically for you. Try to click the button in order to add more content and check that how the new slides are being added.
166 |
167 |
168 |
169 | ```js showButton
170 | const [slides, setSlides] = useState([0])
171 | const slidesToRender = slides.map((_, index) => (
172 |
173 | ))
174 |
175 | return (
176 | <>
177 |
178 | {slidesToRender}
179 |
180 | )
181 | ```
182 |
183 | ### Using Infinite Loop
184 |
185 | You could make your slider infinite. That meand when it arrive to the last slide, and the user clicks on next it starts again. And when the slider is on the first slide, and the user clicks on previous, it goes to the last slide.
186 |
187 | #### Simple example with 5 slides in total
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 | ```js showButton
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 | ```
206 |
207 | ### Show multiple slides at once 🤹♂️
208 |
209 | Use `numOfSlides` prop to determine the number of slides that will be shown at once.
210 |
211 | #### Simple example with 3 slides
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 | ```js showButton
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 | ```
236 |
237 | #### Example with less slides than numOfSlides
238 |
239 | Using `numOfSlides` with sanitize the number of shown items if there's not enough children available to be used. For example, if `numOfSlides` is 5, but you have only two slides, it will show only two using the full width.
240 |
241 |
242 |
243 |
244 |
245 |
246 | ```js showButton
247 |
248 |
249 |
250 |
251 | ```
252 |
253 | #### Example with less slides than numOfSlides but with sanitize as false
254 |
255 | You could, however, disable the previous behaviour by using the prop `sanitize` in order to avoid changing the `numOfSlides` prop on the fly. This mean the space will be divided by the numOfSlides even if there's no slides enough to show.
256 |
257 |
258 |
259 |
260 |
261 |
262 | ```js showButton
263 |
264 |
265 |
266 |
267 | ```
268 |
269 |
270 |
271 | #### Creating dots ···
272 |
273 | While React Slidy doesn't offer a built-in progress indicator, you could build one easily with a few lines of code thanks to its API.
274 |
275 |
276 |
277 | ```js showButton
278 | import React, {useState} from 'react'
279 | import ReactSlidy from '../../src/index'
280 |
281 | const SLIDES = ['/1.jpg', '/2.jpg', '/3.jpg', '/4.jpg']
282 |
283 | const createStyles = isActive => ({
284 | background: 'transparent',
285 | border: 0,
286 | color: isActive ? '#333' : '#ccc',
287 | cursor: 'pointer',
288 | fontSize: '32px'
289 | })
290 |
291 | export default () => {
292 | const [actualSlide, setActualSlide] = useState(0)
293 |
294 | const updateSlide = ({currentSlide}) => {
295 | setActualSlide(currentSlide)
296 | }
297 |
298 | return (
299 | <>
300 |
301 | {SLIDES.map(src => (
302 |
303 | ))}
304 |
305 |
318 |
319 | )
320 | }
321 | ```
322 |
323 | ### Avoid slides to use the full width
324 |
325 | By default, slides uses the full width of the container. So, if you're using an image, it uses all the width available. You could avoid this by using the prop `useFullWidth`.
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 | ```js showButton
334 |
335 |
336 |
337 |
338 |
339 | ```
340 |
341 | #### Adapt slides to use the height available
342 |
343 | If you have slides with different heights you need to specify the maxHeight to be used for each slide, in order to avoid inner images or content to make the slider jump as they will automatically adapt to the available width and automatically detect the height.
344 |
345 |
14 | 
15 | 
16 | 
17 | 
329 | 
351 | 
355 | 
359 | 
363 |