day18 completed

4 years ago · 4b55e09f39
parent 1933dc04d7
commit 4b55e09f39
3 changed files with 143 additions and 0 deletions
--- a/code/18-background-slider/index.html
+++ b/code/18-background-slider/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>18 background slider</title>
+
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+        crossorigin="anonymous" />
+</head>
+
+<body>
+
+    <div id="wrapper">
+        <div class="container">
+            <button class="arrow" id="left">
+                <i class="fas fa-arrow-left"></i>
+            </button>
+
+            <div id="slide">
+                <img src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
+                    id="img" alt="">
+            </div>
+            <button class="arrow" id="right">
+                <i class="fas fa-arrow-right"></i>
+            </button>
+        </div>
+
+        <div class="bg"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/18-background-slider/script.js
+++ b/code/18-background-slider/script.js
@ -0,0 +1,41 @@
+const wrapper = document.getElementById("wrapper");
+const img = document.getElementById("img");
+
+const images = [
+  "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
+  "https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80",
+  "https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
+  "https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80",
+  "https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
+];
+
+let currentImg = 0;
+
+function imageChanger() {
+  wrapper.style.backgroundImage = `url('${images[currentImg]}')`;
+
+  img.style.opacity = 0;
+  img.src = images[currentImg];
+  img.style.opacity = 1;
+}
+
+const leftArrow = document.getElementById("left");
+const rightArrow = document.getElementById("right");
+
+leftArrow.addEventListener("click", () => {
+  if (currentImg === 0) {
+    currentImg = 4;
+  } else {
+    currentImg--;
+  }
+  imageChanger();
+});
+
+rightArrow.addEventListener("click", () => {
+  if (currentImg === 4) {
+    currentImg = 0;
+  } else {
+    currentImg++;
+  }
+  imageChanger();
+});
--- a/code/18-background-slider/style.css
+++ b/code/18-background-slider/style.css
@ -0,0 +1,63 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+div#wrapper {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80");
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  transition: background-image 0.3s ease-in;
+}
+
+.bg {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.8);
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+}
+
+.arrow {
+  background: transparent;
+  border: 2px solid orange;
+  padding: 15px;
+  color: #fff;
+  font-size: 25px;
+}
+
+#right {
+  border-left: unset;
+}
+
+#left {
+  border-right: unset;
+}
+
+#slide {
+  width: calc(100vw * 0.8);
+  height: calc(100vh * 0.8);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+#slide img {
+  height: 100vh;
+  transition: opacity 0.3s ease-in;
+}