我英语不好。
你能帮我吗?它无法在移动设备上上下滚动。
我只是按照JS代码制作滑块来学习
滑块可以工作,但如果我上下滚动,它只能工作滑块,不能上下滚动。
我想知道它不起作用的原因
我在检查网站的移动界面时编写的滑块有问题。
当您从左向右、从右向左拖动滑块时,滑块就会起作用。但基本上,发生的情况是,当我触摸网站的滑块部分时,页面冻结,我无法再上下滚动。
我想知道发生这种情况的原因。 (顺便说一句,我英语不好,如果你能用更简单的方式解释那就太好了!)
我用了翻译!
<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);
您没有正确关闭代码中的许多 HTML 标记。例如,
元素的 ID 为
slide_content
。