/** * @typedef {Object} SliderArg * @property {string} next_ref - сслыка на иконку вперед * @property {string} previous_ref - ссылка на иконку назадъ * @property {{main: HTMLStyleElement, next: HTMLElement, previous: HTMLElement}} slider - разграниченный слайдер * @property {Array} images - массив ссылок */ /** * Класс для создания слайдера * @class * @property {HTMLElement} main - DOM-элемент для слайдов * @property {number} current_slide - текущий слайд * @property {Array} slides - слайды */ class Slider { /** * @param {SliderArg} arg */ constructor ({slider: {main, next, previous}, next_ref, previous_ref, images = null}) { /** Безопасный вызов */ recovery( self => { /** Инъекция DOM-элементов (слайдер) */ Object.entries({main, next, previous}).forEach(([name, value]) => { if (value instanceof HTMLElement) self[name] = value else throw new Error(`Невалидный аргумент ${value}`) }) /** Инициалиазация кнопок */ Object.entries({ [next_ref]: { element: next, func: this.next_slide }, [previous_ref]: { element: previous, func: this.previous_slide } }).forEach( ([ref, {element, func}]) => { element.src = ref element.onclick = func.bind(self) } ) self.current_slide = 0 self.slides = [] /** Инициализация фыфок (з****лся эти JSDoc'и писать)*/ if(Array.isArray(images)) images.forEach(self.add_slide) }, (...e) => { console.log("Ошибка при инициалиазции slider-page"); e.forEach(er => {throw er}); } ) (this) } /** * Обновляет слайдер (смещает на 80vw * current_slide) * @method */ update_slider = recovery( () => this.main.style.transform = `translateX(-${this.current_slide * 80}vw)`, (...e) => { console.log("Ошибка при обновлении слайдера (Slider.update_slider)") e.forEach(er => {throw er}) } ) /** * Переключает на следующий слайд * @method */ next_slide = recovery( () => { if (this.current_slide < this.slides.length - 1) this.current_slide++ else this.current_slide = 0 this.update_slider() }, (...e) => { console.log("Ошибка при переключении на следующий слайд") e.forEach(er => {throw er}) } ) /** * Переключает на предыдущий слайд * @method */ previous_slide = recovery( () => { if (this.current_slide > 0) this.current_slide-- else this.current_slide = this.slides.length - 1 this.update_slider() }, (...e) => { console.log("Ошибка при переключении на следующий слайд") e.forEach(er => {throw er}) } ) /** * Добавление новых слайдов * @method */ add_slide = recovery( slide_ref => { /** Изображение */ const img = document.createElement('img') /** Применение стилей */ img.classList.add('slide') /** Линковка ссылки */ img.src = slide_ref /** Регистрация слайда в dom-элементе */ this.main.appendChild(img) /** Регистрация в массиве */ this.slides.push(img) }, (...e) => { console.log("Ошибка при добавлении слайда") e.forEach(er => {throw er}) } ) clear = recovery( () => { this.main.innerHTML = '' }, (...e) => { console.log("Ошибка при очищении") e.forEach(er => {throw er}) } ) }