diff --git a/js-core/homeworks/homework-17/index.html b/js-core/homeworks/homework-17/index.html
new file mode 100644
index 0000000..e8eb72d
--- /dev/null
+++ b/js-core/homeworks/homework-17/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+ Home work 17
+
+
+
+
+
+
+
+ SLIDER
+
+
+
+
\ No newline at end of file
diff --git a/js-core/homeworks/homework-17/main.css b/js-core/homeworks/homework-17/main.css
new file mode 100644
index 0000000..863e5c2
--- /dev/null
+++ b/js-core/homeworks/homework-17/main.css
@@ -0,0 +1,80 @@
+*{
+ font-family: 'Palanquin Dark', sans-serif;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.title{
+ display: block;
+ color: #fff;
+ font-size: 40px;
+}
+
+#next, #prev{
+ color: #fff;
+ font-size: 24px;
+ position: absolute;
+ cursor: pointer;
+}
+
+#next{
+ top: 50%;
+ right: 20px;
+}
+
+#prev{
+ top: 50%;
+ left: 20px;
+}
+
+.item{
+ height: 500px;
+ width: 950px;
+ background-color: whitesmoke;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ display: none;
+}
+
+.active{
+ display: block;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.number{
+ color: gray;
+ font-size: 60px;
+}
+
+.gray{
+ background-color: lightgray;
+}
+
+.gray > .number {
+ color: #fff;
+}
+
+#current-item{
+ display: flex;
+ justify-content: center;
+}
+
+.pointer{
+ color: lightseagreen;
+ font-size: 20px;
+ margin: 0 10px;
+ cursor: pointer;
+ transition: .2s ease;
+}
+
+.active-pointer{
+ color: #fff;
+ font-size: 26px;
+}
diff --git a/js-core/homeworks/homework-17/src/main.js b/js-core/homeworks/homework-17/src/main.js
new file mode 100644
index 0000000..8a040ab
--- /dev/null
+++ b/js-core/homeworks/homework-17/src/main.js
@@ -0,0 +1,297 @@
+/*
+ TASK 0
+ Отобразите всех лидеров массива.
+ *
+ *
+ * Элемент лидер если он больше чем все последующие элементы
+ * после него ( элементы справа ).
+ * Последний элемент всегда лидер. Например в массиве [16,17,4,3,5,2]
+ * лидеры 17, 5 и 2.
+ *
+ * */
+
+const solution = arr => {
+ return arr.reduce((newArr, number, index, arr) => {
+
+ const arrToCompare = arr.slice((index + 1), arr.length);
+
+ if(arrToCompare.every(numbers => number > numbers)) {
+ newArr.push(number);
+ }
+
+ return newArr;
+ }, [])
+};
+
+console.log(solution([16, 17, 4, 3, 5, 2])); // === [17, 5, 2]
+console.log(solution([4, 3, 7, 12, 6, 67, 5, 45, 34, 35, 2, 8])); // [67, 45, 35, 8]
+console.log(solution([12, 10, 12, 8, 7, 6])); // [12, 8, 7, 6]
+console.log(solution([1, 2, 3, 4, 5, 4])); // [5, 4]
+console.log(solution([12, 12, 12])); // [5, 4]
+
+/* TASK 1
+ * Сделайте карусель.
+ * При клике по кнопке "<=" показывается первое изображение по "=>" следующее.
+ *
+ * 1.1
+ * Сделайте слайдер - бесконечным, после третьего изображения снова первое.
+ * 1.2
+ * Добавьте внизу цифры с текущим активным изображением.
+ *
+ *
+ *
+ * @SUPER -> @front-end
+ * Уберите в стилях li - position:absolute.
+ * изменяйте свойство transform:translate3d у .carousel, добавьте transition
+ * и сделайте чтобы картинки передвигались влево и вправо
+ *
+ * @PUPER -> переход к первой картинка
+ *
+ * */
+
+class Carousel {
+ constructor(quantitySlides, infinityBoolean) {
+ this.quantityOfSlides = quantitySlides;
+ this.infinity = infinityBoolean || false;
+ }
+
+ render() {
+ const sliderTemplate = /*html*/`
+
+ Prev
+ ${this.createItems()}
+ Next
+ ${this.createPointers()}
+
+ `;
+
+ const mountMode = document.getElementById('mount-mode');
+ mountMode.innerHTML += sliderTemplate;
+ }
+
+ createItems() {
+ let output = '';
+
+ for(let i = 1; i <= this.quantityOfSlides; i++) {
+ if(i === 1) {
+ output += /*html*/`${i}
+ `;
+ }
+ if(i % 2 !== 0 && i !== 1) {
+ output += /*html*/`${i}
+ `;
+ }
+ if(i % 2 === 0) {
+ output += /*html*/`${i}
+ `;
+ }
+ }
+
+ return output;
+ }
+
+ createPointers() {
+ const blockWithPointers = document.createElement('div');
+ blockWithPointers.id = 'current-item';
+
+ for(let i = 1; i <= this.quantityOfSlides; i++) {
+ if(i === 1) {
+ blockWithPointers.innerHTML += /*html*/`${i}`
+ } else {
+ blockWithPointers.innerHTML += /*html*/`${i}`
+ }
+ }
+
+ return blockWithPointers.outerHTML;
+ }
+
+ applyListeners() {
+ const items = [...document.querySelectorAll('.item')];
+ const pointers = [...document.getElementById('current-item').children];
+
+ const nextBtn = document.getElementById('next');
+ const prevBtn = document.getElementById('prev');
+
+ const next = () => {
+ for(let i = 0; i < items.length; i++) {
+ const item = items[i];
+ const nextItem = items[i + 1];
+ if(item.classList.contains('active')) {
+ if(item.firstChild.textContent == this.quantityOfSlides) {
+ item.classList.remove('active');
+ items[0].classList.add('active');
+ pointers[i].classList.remove('active-pointer');
+ pointers[0].classList.add('active-pointer');
+ return;
+ } else {
+ item.classList.remove('active');
+ nextItem.classList.add('active');
+ pointers[i].classList.remove('active-pointer');
+ pointers[i + 1].classList.add('active-pointer');
+ return; }
+ }
+ }
+ }
+
+ if(this.infinity === true) {
+ setInterval(next, 1000);
+ }
+
+ const prev = () => {
+ for(let i = 0; i < items.length; i++) {
+ const item = items[i];
+ const prevItem = items[i - 1];
+ if(item.classList.contains('active')) {
+ if(item.firstChild.textContent === '1') {
+ item.classList.remove('active');
+ items[items.length - 1].classList.add('active');
+ pointers[i].classList.remove('active-pointer');
+ pointers[pointers.length - 1].classList.add('active-pointer');
+ return;
+ }
+ item.classList.remove('active');
+ prevItem.classList.add('active');
+ pointers[i].classList.remove('active-pointer');
+ pointers[i - 1].classList.add('active-pointer');
+ return;
+ }
+ }
+ }
+
+ nextBtn.addEventListener('click', next);
+ prevBtn.addEventListener('click', prev);
+
+ const wraperForPointers = document.getElementById('current-item');
+ wraperForPointers.addEventListener('click', (e) => {
+ const point = Number(e.target.textContent);
+
+ if(e.target.classList.contains('active-pointer') || e.target.id === 'current-item') {
+ return;
+ }
+
+ const activeSlide = document.querySelector('.active');
+ activeSlide.classList.remove('active');
+ const activePointer = document.querySelector('.active-pointer');
+ activePointer.classList.remove('active-pointer');
+
+ e.target.classList.add('active-pointer');
+ items[point - 1].classList.add('active');
+ })
+ }
+}
+
+const slider = new Carousel(10, true);
+slider.render();
+slider.applyListeners();
+/*создайте новый instance Carouse при вызове initialize*/
+// var myInitializedCarousel = Carousel.initialize({
+// elementToApply: '.carousel',
+// infinity: true,
+// });
+
+/*
+* TASK 2
+* Сделайте класс, который будет иметь метод topStyle
+* метод topStyle принимает объект с CSS стилями и добавляет в
+* новый элемент с данными стилями
+*
+*
+* */
+// .topStyle('fetch', {backgroundColor:'blue'})
+/*
+*
+*