@@ -89,7 +159,7 @@
Use the module
import * as React from 'react';
import { createRoot } from 'react-dom/client';
-import { Carousel, CarouselItem } from 'react-round-carousel';
+import { Carousel, CarouselItem, CarouselRef } from 'react-round-carousel';
// Create an array of Carousel Items
const items: CarouselItem[] = Array(20)
@@ -105,7 +175,17 @@
Use the module
)
}));
-const App = () => <Carousel items={items} />;
+const App = () => {
+ const carouselRef = React.createRef
();
+
+ return (
+ <Carousel
+ ref={carouselRef}
+ items={items}
+ slideOnClick
+ />;
+ )
+}
createRoot(document.getElementById('root')!).render(<App />);
diff --git a/demo/index.tsx b/demo/index.tsx
index 8525cf8..7596ea1 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -3,11 +3,20 @@ import { createRoot } from 'react-dom/client';
import 'scriptex-socials';
-import { Carousel, CarouselRef } from '../dist/index';
import { items } from './mocks';
+import { Carousel, CarouselRef } from '../dist/index';
+
+declare global {
+ namespace JSX {
+ interface IntrinsicElements {
+ 'social-links': React.DetailedHTMLProps, HTMLElement>;
+ }
+ }
+}
const App = () => {
- const ref = React.createRef();
+ const carouselRef = React.createRef();
+ const [result, setResult] = React.useState('');
return (
<>
@@ -20,7 +29,79 @@ const App = () => {
See code on Github
-
+
External controls
+
+ {result && (
+
+ {result}
+
+ )}
+
+
+
+ {
+ setResult(JSON.stringify(carouselRef.current?.getItems() || [], null, 2));
+ }}
+ >
+ Get carousel items
+
+
+
+
+ {
+ setResult('');
+
+ carouselRef.current?.prev();
+ }}
+ >
+ Go to previous slide
+
+
+
+
+ {
+ setResult('');
+
+ carouselRef.current?.next();
+ }}
+ >
+ Go to next slide
+
+
+
+
+ {
+ const index = carouselRef.current?.getSelectedIndex().toString();
+
+ setResult(`Selected slide's index is ${index}`);
+ }}
+ >
+ Get selected slide's index
+
+
+
+
+ {
+ const index = Math.floor(Math.random() * items.length);
+
+ carouselRef.current?.setSelectedIndex(index);
+
+ setResult(`Selected slide's index is ${index}`);
+ }}
+ >
+ Set selected slide's index to a random value
+
+
+
+