-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4d70a54
commit 87cad9d
Showing
7 changed files
with
128 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "extends": "eslint-config-standard", | ||
| "rules": { | ||
| "no-unused-vars": "off" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,9 @@ | ||
| { | ||
| "extends": ["stylelint-config-standard"] | ||
| "extends": ["stylelint-config-standard"], | ||
| "rules": { | ||
| "selector-pseudo-class-no-unknown": null, | ||
| "selector-type-no-unknown": null, | ||
| "property-no-unknown": null, | ||
| "at-rule-no-unknown": null | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,95 @@ | ||
| const initSlider = () => { | ||
| const imageList = document.querySelector(".slider-wrapper .image-list"); | ||
| const slideButtons = document.querySelectorAll( | ||
| ".slider-wrapper .slide-button" | ||
| ); | ||
| const sliderScrollbar = document.querySelector( | ||
| ".container .slider-scrollbar" | ||
| ); | ||
| const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb"); | ||
| const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth; | ||
| const initCarousel = (containerId, images) => { | ||
| const container = document.getElementById(containerId) | ||
| const imageList = container.querySelector('.image-list') | ||
|
|
||
| scrollbarThumb.addEventListener("mousedown", (e) => { | ||
| const startX = e.clientX; | ||
| const thumbPosition = scrollbarThumb.offsetLeft; | ||
| const maxThumbPosition = | ||
| sliderScrollbar.getBoundingClientRect().width - | ||
| scrollbarThumb.offsetWidth; | ||
| images.forEach(imageSrc => { | ||
| const image = document.createElement('img') | ||
| image.src = imageSrc | ||
| image.classList.add('image-item') | ||
| imageList.appendChild(image) | ||
| }) | ||
|
|
||
| const handleMouseMove = (e) => { | ||
| const deltaX = e.clientX - startX; | ||
| const newThumbPosition = thumbPosition + deltaX; | ||
| const boundedPosition = Math.max( | ||
| 0, | ||
| Math.min(maxThumbPosition, newThumbPosition) | ||
| ); | ||
| const scrollPosition = | ||
| (boundedPosition / maxThumbPosition) * maxScrollLeft; | ||
| const slideButtons = container.querySelectorAll('.slide-button') | ||
| const sliderScrollbar = container.querySelector('.slider-scrollbar') | ||
| const scrollbarThumb = sliderScrollbar.querySelector('.scrollbar-thumb') | ||
| const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth | ||
|
|
||
| scrollbarThumb.style.left = `${boundedPosition}px`; | ||
| imageList.scrollLeft = scrollPosition; | ||
| }; | ||
| const handleMouseUp = () => { | ||
| document.removeEventListener("mousemove", handleMouseMove); | ||
| document.removeEventListener("mouseup", handleMouseUp); | ||
| }; | ||
| document.addEventListener("mousemove", handleMouseMove); | ||
| document.addEventListener("mouseup", handleMouseUp); | ||
| }); | ||
| scrollbarThumb.addEventListener('mousedown', (e) => { | ||
| const startX = e.clientX | ||
| const thumbPosition = scrollbarThumb.offsetLeft | ||
| const maxThumbPosition = | ||
| sliderScrollbar.getBoundingClientRect().width - | ||
| scrollbarThumb.offsetWidth | ||
|
|
||
| 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" }); | ||
| }); | ||
| }); | ||
| const handleMouseMove = (e) => { | ||
| const deltaX = e.clientX - startX | ||
| const newThumbPosition = thumbPosition + deltaX | ||
| const boundedPosition = Math.max( | ||
| 0, | ||
| Math.min(maxThumbPosition, newThumbPosition) | ||
| ) | ||
| const scrollPosition = | ||
| (boundedPosition / maxThumbPosition) * maxScrollLeft | ||
|
|
||
| const handleSlideButtons = () => { | ||
| slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex"; | ||
| slideButtons[1].style.display = | ||
| imageList.scrollLeft >= maxScrollLeft ? "none" : "flex"; | ||
| }; | ||
| scrollbarThumb.style.left = `${boundedPosition}px` | ||
| imageList.scrollLeft = scrollPosition | ||
| } | ||
|
|
||
| const updateScrollThumbPosition = () => { | ||
| const scrollPosition = imageList.scrollLeft; | ||
| const thumbPosition = | ||
| (scrollPosition / maxScrollLeft) * | ||
| (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth); | ||
| scrollbarThumb.style.left = `${thumbPosition}px`; | ||
| }; | ||
| const handleMouseUp = () => { | ||
| console.log('mouseup-event') | ||
| document.removeEventListener('mousemove', handleMouseMove) | ||
| document.removeEventListener('mouseup', handleMouseUp) | ||
| } | ||
|
|
||
| imageList.addEventListener("scroll", () => { | ||
| updateScrollThumbPosition(); | ||
| handleSlideButtons(); | ||
| }); | ||
| }; | ||
| document.addEventListener('mousemove', handleMouseMove) | ||
| document.addEventListener('mouseup', handleMouseUp) | ||
| }) | ||
|
|
||
| function scrollToBottom() { | ||
| 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' }) | ||
| }) | ||
| }) | ||
|
|
||
| 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() | ||
| }) | ||
| } | ||
| const slider1Images = ['res/1.jpg', 'res/2.jpg', 'res/3.jpg', 'res/4.jpg', 'res/5.jpg', 'res/1.jpg'] | ||
| 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) | ||
| } | ||
|
|
||
| function scrollToBottom () { | ||
| window.scrollTo({ | ||
| top: document.body.scrollHeight, | ||
| behavior: "smooth", | ||
| }); | ||
| behavior: 'smooth' | ||
| }) | ||
| } | ||
|
|
||
| window.addEventListener("resize", initSlider); | ||
| window.addEventListener("load", initSlider); | ||
| let isListenerAdded = false | ||
|
|
||
| window.addEventListener('resize', () => { | ||
| isListenerAdded = false | ||
| }) | ||
| window.addEventListener('load', initSlider) |