I'm not good at English.
could you help me? it doesn't work socroll up and down on mobile.
I just followed JS code for making slider for studying
slider is works but if I scroll up and down it only works slider not scroll up and down.
I wanna know about the reason why it doesn't work
I have a problem with the Slider that I programmed when I checked the Mobile interface of my website.
The slider works when you drag it from left and right and right to left. But basically, what's happening is that when i touch the slider section of the website, the page freezes and I'm not able to scroll up and down anymore.
I want to know the reason why this is happening. (Btw I'm not good at English, if you could explain it in a simpler manner it would be great!)
I used translation!
<div class="wrapper"><i id="left" class="fa-solid fa-angle-left"></i><div class="carousel"><div class="card card-content"><p id="content-s-heading">title</p><h1 id="content-b-heading">content</h1><p id="slide_content">sentence<br> sentence/p><button><a href="#">see more</p></a></button></div><div class="card card_prd"><a href="#"><img src="slider_prd_combo_1.jpg" alt="img" draggable="false"><h1 id="slider_prd_title">combo title</h1><p id="slider_prd_price">price 5%</p></a></div><div class="card card_prd"><a href="#"><img src="선물세트1.jpg" alt="img" draggable="false"><h1 id="slider_prd_title">combo title</h1><p id="slider_prd_price">price 5%</p</a></div><div class="card card_prd"><a href="#"><img src="선물세트2.jpg" alt="img" draggable="false"><h1 id="slider_prd_title">combo title</h1><p id="slider_prd_price">price 5%</p></a></div></div><i id="right" class="fa-solid fa-angle-right"></i></div>*{ margin: 0; padding: 0; box-sizing: border-box; margin: 0 auto;}.wrapper{ display: flex; max-width: 1500px; position: relative; margin: 0 auto;}.wrapper i{ top: 50%; width: 80px; height: 80px; cursor: pointer; position: absolute; font-size: 1.2rem; text-align: center; line-height: 80px; background: #000; color: #fff; transform: translateY(-50%); transition: 0.5s ease-in-out; opacity: 0;}.wrapper i:active{ transform: translateY(-50%) scale(0.9);}.wrapper:hover i{ opacity: 1;}.wrapper i:first-child{ left: -80px; /* needs position: absolute */ display: none; /* hide button */}.wrapper i:last-child{ right: -80px; /* needs position: absolute */}.wrapper .carousel{ font-size: 0px; cursor: pointer; white-space: nowrap; scroll-behavior: smooth; display: flex; overflow-x: auto; margin-bottom: 48px; padding: 0 0 48px;}.carousel::-webkit-scrollbar{ height: 3px;}.carousel::-webkit-scrollbar-thumb{ background: #000; border-radius: 10px;}.carousel::-webkit-scrollbar-track{ background-color: rgba(0, 0, 0, .2);}.card-content { padding: 60px 185px 60px 0;}.card-content #content-s-heading { margin-bottom: 5px; font-size: 14px;}.card-content #content-b-heading { margin-bottom: 10px; font-size: 30px; font-weight: 400;}.card-content #slide_content { font-size: 14px; margin: 30px 0;}.card-content button{ border: none; background-color: #fff;}.card-content button:hover a{ text-decoration: underline;}.card-content button a{ text-decoration-line: none; color: #000; font-size: 15px;}.card a{ text-decoration: none; text-align: center; font-size: 0;}.card #slider_prd_title { font-size: 20px; color: #000; margin: 10px 0;}.card #slider_prd_price{ font-size: 16px; color: #000;}.carousel.dragging{ cursor: grab; scroll-behavior: auto;}.carousel.dragging img{ pointer-events: none;}.carousel img{ width: 484px; height: auto; object-fit: cover; user-select: none; display:block; margin-left:16px;}@media all and (max-width: 1023px){ .wrapper{ max-width: 941px; } .card-content { padding: 60px 172px 60px 0; } .carousel img{ width: 450px; } .carousel img:first-child{ margin-left: 0; } }@media all and (max-width: 428px){ .wrapper{ max-width: 395px; } .wrapper .carousel{ margin-bottom: 45px; padding: 0 0 8px; } .card-content { display:none; } .card_prd { margin-left: 0; } .carousel img{ width: 395px; } .wrapper i:first-child{ left: 0px; /* needs position: absolute */ } .wrapper i:last-child{ right: 0px; /* needs position: absolute */ } }@media all and (max-width: 375px){ .wrapper{ max-width: 344px; } .carousel img{ width: 344px; } }const carousel = document.querySelector(".carousel"),firstImg = carousel.querySelectorAll("img")[0],arrowIcons = document.querySelectorAll(".wrapper i");let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;const showHideIcons = () => { // showing and hiding prev/next icon according to carousel scroll left value let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width arrowIcons[0].style.display = carousel.scrollLeft == 16 ? "none" : "block"; arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";}arrowIcons.forEach(icon => { icon.addEventListener("click", () => { let firstImgWidth = firstImg.clientWidth + 16; // getting first img width & adding 14 margin value // if clicked icon is left, reduce width value from the carousel scroll left else add to it carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth; setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms });});const autoSlide = () => { // if there is no image left to scroll then return from here if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return; positionDiff = Math.abs(positionDiff); // making positionDiff value to positive let firstImgWidth = firstImg.clientWidth + 16; // getting difference value that needs to add or reduce from carousel left to take middle img center let valDifference = firstImgWidth - positionDiff; if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff; } // if user is scrolling to the left carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;}const dragStart = (e) => { // updatating global variables value on mouse down event isDragStart = true; prevPageX = e.pageX || e.touches[0].pageX; prevScrollLeft = carousel.scrollLeft;}const dragging = (e) => { // scrolling images/carousel to left according to mouse pointer if(!isDragStart) return; e.preventDefault(); isDragging = true; carousel.classList.add("dragging"); positionDiff = (e.pageX || e.touches.pageX) - prevPageX; carousel.scrollLeft = prevScrollLeft - positionDiff; showHideIcons();}const dragStop = () => { isDragStart = false; carousel.classList.remove("dragging"); if(!isDragging) return; isDragging = false; autoSlide();}carousel.addEventListener("mousedown", dragStart);carousel.addEventListener("touchstart", dragStart);document.addEventListener("mousemove", dragging);carousel.addEventListener("touchmove", dragging);document.addEventListener("mouseup", dragStop);carousel.addEventListener("touchend", dragStop);
