Merge pull request monicaimendes#7 from MonicaIacy/feature/slider-banner

Feature/slider banner

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
-package.json
+package.json
+yarn.lock

css/style.css

@@ -40,6 +40,30 @@ article.evento {
     width: 350px;
 }
 
+#slider {
+    width: 100%;
+    height: 50vw;
+    max-height: 500px;
+    position: relative;
+
+}
+
+#slider img {
+    opacity: 0;
+
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+
+    transition: opacity 800ms;
+}
+
+#slider img.selected {
+    opacity: 1;
+}
+
 footer nav ul{
     list-style: none;
     display: flex;

index.html

@@ -16,10 +16,12 @@
         <img src="img/Sound-logo (1).png" width="300" alt="">
     </header>
     <main>
-        <section class="full d-flex justify-content-center align-items-center"
-            style="background-color: #F8BBD0; color: #fff">
-            <div class="text-center">
-                <h1>Adicione um banner maneiro aqui</h1>
+        <section class="d-flex justify-content-center align-items-center">
+            <div id="slider">
+                <img class="selected" src="img/banner1.jpg" alt="banner1">
+                <img src="img/banner2.jpg" alt="banner2">
+                <img src="img/banner3.jpg" alt="banner3">
+                <img src="img/banner4.jpg" alt="banner4">
             </div>
         </section>
         <section class="full">
@@ -103,6 +105,7 @@ <h1 class="container d-flex justify-content-center align-items-center">Faça a s
         </div>
     </footer>
     <script src="js/index.js"></script>
+    <script src="js/slider.js"></script>
 </body>
 
 </html>

js/excluir-evento.js

@@ -40,6 +40,7 @@ button.addEventListener("click", async (event) => {
   }).then(response => console.log(response))
     .then(() => {
       alert('Evento excluído')
+      window.location.replace('admin.html?acao=edit')
     })
 })
 

js/slider.js

@@ -0,0 +1,25 @@
+let time = 3000
+let currentImageIndex = 0
+let images = document.querySelectorAll('#slider img')
+max = images.length
+
+function nextImage(){
+  images[currentImageIndex].classList.remove("selected")
+
+  currentImageIndex++
+
+  if(currentImageIndex >= max){
+    currentImageIndex = 0
+  }
+
+  images[currentImageIndex].classList.add("selected")
+}
+
+function start() {
+  setInterval(() => {
+    //troca de img
+    nextImage()
+  }, time)
+}
+
+window.addEventListener("load", start)