diff --git a/background-slider/index.html b/background-slider/index.html
new file mode 100644
index 0000000..1752bc7
--- /dev/null
+++ b/background-slider/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+ Background Slider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/background-slider/script.js b/background-slider/script.js
new file mode 100644
index 0000000..a15f328
--- /dev/null
+++ b/background-slider/script.js
@@ -0,0 +1,40 @@
+const body = document.body
+const slides = document.querySelectorAll('.slide')
+const leftBtn = document.getElementById('left')
+const rightBtn = document.getElementById('right')
+
+let activeSlide = 0
+
+rightBtn.addEventListener('click', () => {
+ activeSlide++
+
+ if (activeSlide > slides.length - 1) {
+ activeSlide = 0
+ }
+
+ setBgToBody()
+ setActiveSlide()
+})
+
+leftBtn.addEventListener('click', () => {
+ activeSlide--
+
+ if (activeSlide < 0) {
+ activeSlide = slides.length - 1
+ }
+
+ setBgToBody()
+ setActiveSlide()
+})
+
+setBgToBody()
+
+function setBgToBody() {
+ body.style.backgroundImage = slides[activeSlide].style.backgroundImage
+}
+
+function setActiveSlide() {
+ slides.forEach((slide) => slide.classList.remove('active'))
+
+ slides[activeSlide].classList.add('active')
+}
diff --git a/background-slider/style.css b/background-slider/style.css
new file mode 100644
index 0000000..8e46937
--- /dev/null
+++ b/background-slider/style.css
@@ -0,0 +1,79 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+ background-position: center center;
+ background-size: cover;
+ transition: 0.4s;
+}
+
+body::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.7);
+ z-index: -1;
+}
+
+.slider-container {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ height: 70vh;
+ width: 70vw;
+ position: relative;
+ overflow: hidden;
+}
+
+.slide {
+ opacity: 0;
+ height: 100vh;
+ width: 100vw;
+ background-position: center center;
+ background-size: cover;
+ position: absolute;
+ top: -15vh;
+ left: -15vw;
+ transition: 0.4s ease;
+ z-index: 1;
+}
+
+.slide.active {
+ opacity: 1;
+}
+
+.arrow {
+ position: fixed;
+ background-color: transparent;
+ color: #fff;
+ padding: 20px;
+ font-size: 30px;
+ border: 2px solid orange;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+}
+
+.arrow:focus {
+ outline: 0;
+}
+
+.left-arrow {
+ left: calc(15vw - 65px);
+}
+
+.right-arrow {
+ right: calc(15vw - 65px);
+}