Introduction to Toolset Slides (#596)

* adding introduction to toolset slides

* Added package

* Added package

* formatting slides

Author: milldr

package-lock.json

@@ -31,6 +31,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-github-btn": "^1.4.0",
+    "react-image-gallery": "^1.2.11",
     "react-player": "^2.12.0",
     "sass": "^1.57.1"
   },

package.json

@@ -0,0 +1,39 @@
+import React from "react";
+import styles from "@site/src/components/slides/slides.module.css";
+import ImageGallery from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css"
+
+// https://github.com/xiaolin/react-image-gallery
+// https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n
+const images = Array.from({length: 22}, (_, i) => {
+        let ix = i; // starting at 0 intentionally
+        return {
+            original: "/img/slides/introduction-to-toolset-" + ix + ".svg",
+            thumbnail: "/img/slides/introduction-to-toolset-" + ix + ".svg",
+            originalAlt: "Introduction to Toolset slide " + ix,
+            originalTitle: "Introduction to Toolset slide " + ix,
+            thumbnailAlt: "Introduction to Toolset slide " + ix,
+            thumbnailTitle: "Introduction to Toolset slide " + ix,
+            loading: "lazy"
+        }
+    }
+);
+
+export default function Slides() {
+    return (
+        <main>
+            <section className={styles.slidesContainer}>
+                <div className="container">
+                    <ImageGallery items={images}
+                                  thumbnailPosition={"bottom"}
+                                  showBullets={false}
+                                  showNav={true}
+                                  showIndex={true}
+                                  slideInterval={4000}
+                                  lazyLoad={true}
+                    />
+                </div>
+            </section>
+        </main>
+    );
+}

src/components/slides/slides.js

@@ -0,0 +1,11 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.slidesContainer {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    width: 100%;
+}