diff --git a/src/ex11_js_dom/assets/1.jpg b/src/ex11_js_dom/assets/1.jpg
new file mode 100644
index 0000000000..918e536900
Binary files /dev/null and b/src/ex11_js_dom/assets/1.jpg differ
diff --git a/src/ex11_js_dom/assets/2.jpg b/src/ex11_js_dom/assets/2.jpg
new file mode 100644
index 0000000000..b9650f1aff
Binary files /dev/null and b/src/ex11_js_dom/assets/2.jpg differ
diff --git a/src/ex11_js_dom/assets/3.jpg b/src/ex11_js_dom/assets/3.jpg
new file mode 100644
index 0000000000..9d58685e9c
Binary files /dev/null and b/src/ex11_js_dom/assets/3.jpg differ
diff --git a/src/ex11_js_dom/assets/4.jpg b/src/ex11_js_dom/assets/4.jpg
new file mode 100644
index 0000000000..276774970a
Binary files /dev/null and b/src/ex11_js_dom/assets/4.jpg differ
diff --git a/src/ex11_js_dom/assets/5.jpg b/src/ex11_js_dom/assets/5.jpg
new file mode 100644
index 0000000000..a465152a19
Binary files /dev/null and b/src/ex11_js_dom/assets/5.jpg differ
diff --git a/src/ex11_js_dom/assets/6.jpg b/src/ex11_js_dom/assets/6.jpg
new file mode 100644
index 0000000000..f00a346a23
Binary files /dev/null and b/src/ex11_js_dom/assets/6.jpg differ
diff --git a/src/ex11_js_dom/task-01.css b/src/ex11_js_dom/task-01.css
new file mode 100644
index 0000000000..c14fbc8616
--- /dev/null
+++ b/src/ex11_js_dom/task-01.css
@@ -0,0 +1,65 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+.app {
+ width: 100%;
+}
+
+.slider {
+ margin: 20px;
+ height: 800px;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+}
+
+.images-wrapper {
+ width: 800px;
+ height: 600px;
+}
+
+.image {
+ border-radius: 15px;
+ border: 5px solid orange;
+ width: 100%;
+ height: 100%;
+ background: url('../ex11_js_dom/assets/1.jpg');
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.button-wrapper {
+ margin-top: 15px;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: center;
+}
+
+.previous-button,
+.next-button {
+ font-size: 16px;
+ background-color: gray;
+ color: #fff;
+ margin: 10px;
+ height: 32px;
+ border-radius: 10px;
+ border: none;
+ outline: none;
+}
+
+.previous-button:hover,
+.next-button:hover {
+ transition: 0.5s;
+ cursor: pointer;
+ background-color: orange;
+}
+
+.previous-button:focus,
+.next-button:focus {
+ transition: 0.5s;
+ cursor: pointer;
+ background-color: orange;
+}
diff --git a/src/ex11_js_dom/task-01.html b/src/ex11_js_dom/task-01.html
new file mode 100644
index 0000000000..7c627c07bd
--- /dev/null
+++ b/src/ex11_js_dom/task-01.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+ Task-01
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/ex11_js_dom/task-01.js b/src/ex11_js_dom/task-01.js
new file mode 100644
index 0000000000..5d7bd18b43
--- /dev/null
+++ b/src/ex11_js_dom/task-01.js
@@ -0,0 +1,43 @@
+const image = document.querySelector('.image');
+const nextButton = document.querySelector('.next-button');
+const previousButton = document.querySelector('.previous-button');
+
+const arrayImage = [
+ '../ex11_js_dom/assets/1.jpg',
+ '../ex11_js_dom/assets/2.jpg',
+ '../ex11_js_dom/assets/3.jpg',
+ '../ex11_js_dom/assets/4.jpg',
+ '../ex11_js_dom/assets/5.jpg',
+];
+let el = 0;
+
+const imageStyled = () => {
+ image.style.background = `url("${arrayImage[el]}")`;
+ image.style.backgroundPosition = 'center center';
+ image.style.backgroundRepeat = 'no-repeat';
+ image.style.backgroundSize = 'cover';
+ image.style.transition = '0.5s';
+};
+
+const nextImage = () => {
+ if (el === arrayImage.length - 1) {
+ el = 0;
+ imageStyled();
+ } else {
+ el += el < arrayImage.length - 1;
+ imageStyled();
+ }
+};
+
+const previousImage = () => {
+ if (el === 0) {
+ el = arrayImage.length - 1;
+ imageStyled();
+ } else {
+ el -= el > 0;
+ imageStyled();
+ }
+};
+
+nextButton.addEventListener('click', nextImage);
+previousButton.addEventListener('click', previousImage);