adding updates to carousel

Author: Greg Pfaff

Carousel/index.html

@@ -13,10 +13,12 @@
   <main>
     <h1> Card Carousel</h1>
     <div class="card_carousel_container">
-      <img data-id="one" class="card one" src='./img/card-svg.svg' />
-      <img data-id="two" class="card two" src='./img/card-svg.1.svg' />
-      <img data-id="three" class="card three" src='./img/card-svg.2.svg' />
-      <img data-id="four" class="card four" src='./img/card-svg.3.svg' />
+      <div class='card_container'>
+        <img data-id="one" class="card one" src='./img/card-svg.svg' />
+        <img data-id="two" class="card two" src='./img/card-svg.1.svg' />
+        <img data-id="three" class="card three" src='./img/card-svg.2.svg' />
+        <img data-id="four" class="card four" src='./img/card-svg.3.svg' />
+      </div>
 
       <div class="card_pagination">
         <div class="page" data-id="one"></div>

Carousel/index.js

@@ -1,20 +1,39 @@
 const buttons = [].slice.call(document.querySelectorAll('.page'));
+const cards = [].slice.call(document.querySelectorAll('.card'));
+
 let active = false;
 
-const activeButtons = (e) => {
-  console.log("i hate js")
-  console.log(active);
+const activeCards = (event) => {
+  cards.forEach(card => {
+    console.log(card.getAttribute('data-id'))
+    if (card.getAttribute('data-id') === event.getAttribute('data-id')) {
+        card.style.zIndex = "1"
+        card.classList.add('active');
+        card.setAttribute('aria-selected', 'true');
+    } else {
+        card.style.zIndex = "0"
+        card.classList.remove('active');
+        card.setAttribute('aria-selected', 'false');
+    }
+  })
+}
+
+const activeButtons = (event) => {
   if (active == true) {
-    buttons.forEach(button => button.classList.remove('active'));
+    activeCards(event.target)
+    buttons.forEach(button => {
+      button.classList.remove('active')
+      button.setAttribute('aria-selected', 'false');
+    });
   }
-  const target = e.target;
-  target.classList.add('active');
   active = true;
+  const activeButton = event.target;
+
+  activeButton.classList.add('active');
+  activeButton.setAttribute('aria-selected', 'true');
 }
 
-buttons.forEach(function (event) {
-  event.addEventListener('click', activeButtons);
-})
+buttons.forEach(button => button.addEventListener('click', activeButtons));
 
 
 

Carousel/style.css

@@ -78,4 +78,5 @@ h1 {
 
 .page.active {
   background-color: red;
+  transition: 300ms ease;
 }