From 037349e11dda2ec30529748dc29c8391bbd05cc4 Mon Sep 17 00:00:00 2001 From: artemskakun Date: Sun, 3 Mar 2024 13:59:55 +0300 Subject: [PATCH] Add destroy. Add BEM in index --- content.css | 1 + index.html | 8 +++-- script.js | 96 +++++++++++++++++++++++++++++++---------------------- style.css | 51 +++------------------------- 4 files changed, 67 insertions(+), 89 deletions(-) diff --git a/content.css b/content.css index 0b6fdcf..12f6e86 100644 --- a/content.css +++ b/content.css @@ -1,3 +1,4 @@ +/* stylelint-disable selector-class-pattern */ * { margin: 0; padding: 0; diff --git a/index.html b/index.html index f47a8a9..de38ea6 100644 --- a/index.html +++ b/index.html @@ -26,18 +26,20 @@

Артем

Привет, я учусь в ИТМО. Можете написать мне в - телеграм. + телеграм.

Я очень люблю котиков, поэтому - тут + тут вы можете посмотреть видео и полистать фото c ними...

- Это я + Это я
diff --git a/script.js b/script.js index 06f546c..3063004 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,46 @@ const initSlider = () => { const initCarousel = (containerId, images) => { const container = document.getElementById(containerId) - const imageList = container.querySelector('.image-list') + let imageList = container.querySelector('.image-list') + let maxScrollLeft + + const destroyCarousel = () => { + imageList.removeEventListener('scroll', handleScroll) + window.removeEventListener('resize', updateSlider) + imageList = null + maxScrollLeft = null + } + + const updateMaxScrollLeft = () => { + maxScrollLeft = imageList.scrollWidth - imageList.clientWidth + } + + const updateSlider = () => { + updateMaxScrollLeft() + updateScrollThumbPosition() + handleSlideButtons() + } + + const handleScroll = () => { + updateScrollThumbPosition() + handleSlideButtons() + } + + const updateScrollThumbPosition = () => { + const scrollPosition = imageList.scrollLeft + const thumbPosition = + (scrollPosition / maxScrollLeft) * + (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth) + scrollbarThumb.style.left = `${thumbPosition}px` + } + + const handleSlideButtons = () => { + slideButtons[0].style.display = imageList.scrollLeft <= 0 ? 'none' : 'flex' + slideButtons[1].style.display = + imageList.scrollLeft >= maxScrollLeft ? 'none' : 'flex' + } + + window.addEventListener('resize', updateSlider) images.forEach(imageSrc => { const image = document.createElement('img') @@ -13,14 +52,21 @@ const initSlider = () => { const slideButtons = container.querySelectorAll('.slide-button') const sliderScrollbar = container.querySelector('.slider-scrollbar') const scrollbarThumb = sliderScrollbar.querySelector('.scrollbar-thumb') - const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth + + updateSlider() + + slideButtons.forEach((button) => { + button.addEventListener('click', () => { + const direction = button.id === 'prev-slide' ? -1 : 1 + const scrollAmount = imageList.clientWidth * direction + imageList.scrollBy({ left: scrollAmount, behavior: 'smooth' }) + }) + }) scrollbarThumb.addEventListener('mousedown', (e) => { const startX = e.clientX const thumbPosition = scrollbarThumb.offsetLeft - const maxThumbPosition = - sliderScrollbar.getBoundingClientRect().width - - scrollbarThumb.offsetWidth + const maxThumbPosition = sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth const handleMouseMove = (e) => { const deltaX = e.clientX - startX @@ -30,14 +76,13 @@ const initSlider = () => { Math.min(maxThumbPosition, newThumbPosition) ) const scrollPosition = - (boundedPosition / maxThumbPosition) * maxScrollLeft + (boundedPosition / maxThumbPosition) * maxScrollLeft scrollbarThumb.style.left = `${boundedPosition}px` imageList.scrollLeft = scrollPosition } const handleMouseUp = () => { - console.log('mouseup-event') document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('mouseup', handleMouseUp) } @@ -46,38 +91,16 @@ const initSlider = () => { document.addEventListener('mouseup', handleMouseUp) }) - slideButtons.forEach((button) => { - button.addEventListener('click', () => { - const direction = button.id === 'prev-slide' ? -1 : 1 - const scrollAmount = imageList.clientWidth * direction - imageList.scrollBy({ left: scrollAmount, behavior: 'smooth' }) - }) - }) + imageList.addEventListener('scroll', handleScroll) - const handleSlideButtons = () => { - slideButtons[0].style.display = imageList.scrollLeft <= 0 ? 'none' : 'flex' - slideButtons[1].style.display = - imageList.scrollLeft >= maxScrollLeft ? 'none' : 'flex' - } - - const updateScrollThumbPosition = () => { - const scrollPosition = imageList.scrollLeft - const thumbPosition = - (scrollPosition / maxScrollLeft) * - (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth) - scrollbarThumb.style.left = `${thumbPosition}px` - } - - imageList.addEventListener('scroll', () => { - updateScrollThumbPosition() - handleSlideButtons() - }) + return destroyCarousel } + const slider1Images = ['res/1.jpg', 'res/2.jpg', 'res/3.jpg', 'res/4.jpg', 'res/5.jpg', 'res/1.jpg'] - initCarousel('slider1', slider1Images) + const destroySlider1 = initCarousel('slider1', slider1Images) const slider2Images = ['res/6.jpg', 'res/7.jpg', 'res/8.jpg', 'res/9.jpg', 'res/10.jpg', 'res/9.jpg'] - initCarousel('slider2', slider2Images) + const destroySlider2 = initCarousel('slider2', slider2Images) } function scrollToBottom () { @@ -87,9 +110,4 @@ function scrollToBottom () { }) } -let isListenerAdded = false - -window.addEventListener('resize', () => { - isListenerAdded = false -}) window.addEventListener('load', initSlider) diff --git a/style.css b/style.css index b96cd3f..b1d7250 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ +/* stylelint-disable selector-class-pattern */ *, ::before, ::after { @@ -77,12 +78,12 @@ h3 { display: flex; } -.hero-link { +.hero-description__link { margin-top: 50px; color: #000; } -.hero-link:hover { +.hero-description__link:hover { color: #4facfe; } @@ -96,54 +97,10 @@ h3 { box-shadow: 2px 5px 10px rgb(0 0 0 / 50%); } -.hero-box-img { +.hero-box__img { animation: ava-bg 3s infinite alternate; } -.slider { - max-width: 90%; - position: relative; - margin: auto; - height: 300px; -} - -.slider .item img { - object-fit: cover; - width: 100%; - height: 300px; -} - -.slider .previous, -.slider .next { - cursor: pointer; - position: absolute; - top: 50%; - width: auto; - margin-top: -22px; - padding: 16px; - color: white; - font-weight: bold; - font-size: 16px; - transition: 0.6s ease; - border-radius: 0 3px 3px 0; -} - -.slider .next { - right: 0; - border-radius: 3px 0 0 3px; -} - -.slider .previous:hover, -.slider .next:hover { - background-color: rgb(0 0 0 / 20%); -} - -/* Анимация слайдов: */ -.slider .item { - animation-name: fade; - animation-duration: 1.5s; -} - @keyframes fade { from { opacity: 0.4;