tyler-vs · tyler-vs · Dec 1, 2021 · Dec 1, 2021 · Dec 1, 2021 · Dec 1, 2021
diff --git a/README.md b/README.md
@@ -2,3 +2,13 @@
 w3school carousel
 
 See how to build a [JavaScript carousel here](https://www.w3schools.com/howto/howto_js_slideshow.asp)
+
+Run locally with `python -m SimpleHTTPServer 4000`.
+
+Inspirations:
+
+- [BXSlider](https://bxslider.com/install/)
+- [Flickity](https://flickity.metafizzy.co/)
+- [Bootstrap Carousel](https://getbootstrap.com/docs/5.1/components/carousel/#via-javascript)
+
+https://codepen.io/tvs/pen/77d3abe973ed4c9f89caf373a5e38b6d?editors=1111
diff --git a/errors.js b/errors.js
@@ -0,0 +1,19 @@
+/**
+ * errors.js
+ *
+ */
+
+// Custom error
+class InvalidSelectorError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "InvalidSelectorError";
+  }
+}
+
+class InvalidCSSNameError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "InvalidCSSNameError";
+  }
+}
diff --git a/index.html b/index.html
@@ -3,13 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>W3Schools Carousels</title>
+  <title>W3Schools JSON Carousels</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <div class="wrap">
-    <h3>w3schools carousel</h3>
-    <p>See full <a href="https://www.w3schools.com/howto/howto_js_slideshow.asp">tutorial</a>.</p>
     <div class="one">
       <h3>Slider #1</h3>
       <div class="carousel carousel--1" id="carousel--1" data-wrap="true" data-interval="2000">
@@ -81,81 +79,45 @@ <h3>Slide #5: <span>Drizzle</span></h3>
 
     <div class="two">
       <h3>Slider #2</h3>
-      <!--     <w3c-carousel-with-selects data-wrap="false" data-interval="4000"> -->
-      <div class="carousel carousel--2" id="carousel--2" data-wrap="false" data-interval="4000">
-        <div class="carousel-items">
-          <div class="carousel-item carousel-item--1">
-            <div class="carousel-item__inner">
-              <div class="carousel-item__box-ratio">
-                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="Orange tree" class="carousel-item__img">
-              </div>
-              <div class="carousel-item__caption">
-                <h3>Slide #1: <span>Oranges</span></h3>
-                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis iste consequatur quasi architecto deserunt illo similique quas ab odit sunt beatae repellendus hic qui, totam sit eum maxime nihil a.</p>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item carousel-item--2">
-            <div class="carousel-item__inner">
-              <div class="carousel-item__box-ratio">
-                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="Submerged" class="carousel-item__img">
-              </div>
-              <div class="carousel-item__caption">
-                <h3>Slide #2: <span>Submerged</span></h3>
-                <p>Corporis obcaecati atque eveniet natus in vero! Tempora iure, doloribus autem, cum blanditiis esse voluptatem fuga provident dicta culpa eligendi quaerat ut repudiandae ullam similique est dolore optio iusto. Ut?</p>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item carousel-item--3">
-            <div class="carousel-item__inner">
-              <div class="carousel-item__box-ratio">
-                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="Look out" class="carousel-item__img">
-              </div>
-              <div class="carousel-item__caption">
-                <h3>Slide #3: <span>Outlook</span></h3>
-                <p>Earum rerum nihil autem, quo iusto doloribus consequuntur, illum magni debitis inventore illo delectus odit praesentium sequi officia temporibus reiciendis suscipit atque sed excepturi velit. Sapiente quod beatae laboriosam dolores.</p>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item carousel-item--4">
-            <div class="carousel-item__inner">
-              <div class="carousel-item__box-ratio">
-
-                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="" class="carousel-item__img">
-              </div>
-              <div class="carousel-item__caption">
-                <h3>Slide #4: <span>Building</span></h3>
-                <p>Libero praesentium repudiandae corrupti, ut ex explicabo minima id itaque! Deleniti corporis velit nostrum, repellendus perferendis dolore illum a maiores aperiam explicabo repellat, corrupti ad, dolorum unde eaque quibusdam! Quis.</p>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item carousel-item--5">
-            <div class="carousel-item__inner">
-              <div class="carousel-item__box-ratio">
-                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" class="carousel-item__img">
-
-              </div>
-              <div class="carousel-item__caption">
-                <h3>Slide #5: <span>Drizzle</span></h3>
-                <p>Numquam provident, dolor sint ea adipisci saepe tempore incidunt voluptas nulla vitae nesciunt laborum deserunt distinctio laboriosam culpa voluptates tenetur! Fuga perspiciatis amet quod quos eius recusandae vel? Ullam, commodi.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button class="button button--prev" data-slide="prev" title="Prev">&#10094;</button>
-        <button class="button button--next" data-slide="next" title="Next">&#10095;</button>
-        <!-- don't need the parent attributes -->
-        <button class="button button--indicator" data-slide-to="1">Slide to #1</button>
-        <button class="button button--indicator" data-slide-to="2">Slide to #2</button>
-        <button class="button button--indicator" data-slide-to="3">Slide to #3</button>
-        <button class="button button--indicator" data-slide-to="4">Slide to #4</button>
-        <button class="button button--indicator" data-slide-to="5">Slide to #5</button>
-
-        <button class="button button--play">Play</button>
-        <button class="button button--pause">Pause</button>
-      </div>
+          <div
+            class="carousel carousel--2"
+            id="carousel--2"
+            data-wrap="false"
+            data-interval="4000"
+            data-auto-controls="true"
+            data-fade="true"
+            data-captions="true"
+            data-pager="true"></div>
     </div>
   </div><!-- /.wrap -->
+  <script src="errors.js"></script>
   <script src="index.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded',function() {
+      // Initiate fist carousel
+      const carousel1 = new Carousel("#carousel--1");
+      // async function to get JSON data, run this before initiating a new carousel.
+      function getJson() {
+        return fetch("https://assets.codepen.io/307033/slides.json")
+          .then(function (response) {
+            // The API call was successful!
+            return response.json();
+          })
+          .then(function (data) {
+            // This is the JSON from our response
+            console.log(data);
+            return data.slides;
+          })
+          .catch(function (err) {
+            // There was an error
+            console.warn("Something went wrong.", err);
+          });
+      }
+      getJson().then((data) => {
+        console.log("data", data);
+        const carousel2 = new SuperJSONCarousel("#carousel--2", data);
+      });
+    });
+  </script>
 </body>
 </html>