carousel 相关问题

我写了一个 js 代码来在滚动时移动轮播，但它不起作用。问题在哪里？（我不是js专家我的主要语言是c#） ... 我写了一个 js 代码来在滚动时移动轮播，但它不起作用。问题在哪里？（我不是js专家我的主要语言是c#） <div class="wrapper mx-auto"> <i class="fa-solid fa-angle-left"></i> <div class="slider"> <img src="https://www.cnet.com/a/img/resize/3470424f360dd5f4c082bf7a5b7c3f5cd78e298b/hub/2022/10/11/3d748baf-46a0-499c-af4c-6e88a8dec985/pixel-7-pro-watch-lanxon-promo-53.jpg?auto=webp&width=1200" /> <img src="~/images/note20.jpg" /> <img src="~/images/s23.jpg" /> <img src="~/images/google-pixel7.jpg"/> <img src="~/images/iphone-xsmax.jpg" /> <img src="~/images/iphone13.jpg" /> </div> <i class="fa-solid fa-angle-right"></i> </div> const carousel = document.querySelector(".slider"); const dragging = (e) => { carousel.scrollLeft = e.pageX; } carousel.addEventListener("mousemove", dragging); 试试这个： HTML： <div class="wrapper mx-auto"> <i class="fa-solid fa-angle-left"></i> <div class="slider"> <img src="https://www.cnet.com/a/img/resize/3470424f360dd5f4c082bf7a5b7c3f5cd78e298b/hub/2022/10/11/3d748baf-46a0-499c-af4c-6e88a8dec985/pixel-7-pro-watch-lanxon-promo-53.jpg?auto=webp&width=1200" /> <img src="~/images/note20.jpg" /> <img src="~/images/s23.jpg" /> <img src="~/images/google-pixel7.jpg"/> <img src="~/images/iphone-xsmax.jpg" /> <img src="~/images/iphone13.jpg" /> </div> <i class="fa-solid fa-angle-right"></i> </div> CSS： .wrapper { width: 100%; overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .slider { display: flex; flex-wrap: nowrap; scroll-snap-align: start; } img { width: 100%; height: 100%; object-fit: cover; } javascript： const wrapper = document.querySelector(".wrapper"); let isDown = false; let startX; let scrollLeft; wrapper.addEventListener("mousedown", (e) => { isDown = true; startX = e.pageX - wrapper.offsetLeft; scrollLeft = wrapper.scrollLeft; }); wrapper.addEventListener("mouseleave", () => { isDown = false; }); wrapper.addEventListener("mouseup", () => { isDown = false; }); wrapper.addEventListener("mousemove", (e) => { if (!isDown) return; e.preventDefault(); const x = e.pageX - wrapper.offsetLeft; const walk = (x - startX) * 3; // You can adjust the scrolling speed here wrapper.scrollLeft = scrollLeft - walk; });

javascript html carousel

回答 1 投票 0

如何在此自动轮播滑块中显示当前图像下的下一张图像？

我正在尝试制作一个无限自动播放轮播，使用香草 JS 全屏显示。我正在使用数组来存储图像。烦人的一点是，当图像幻灯片有一个简单的背景......

javascript carousel autoplay

回答 0 投票 0

keen-slider react js 额外的点显示问题

有一个我无法解决的错误 keen-slider react js 中有一个错误，当没有更多的项目可以滑动但出现点时有代码沙箱代码 https://codesandbox.io/s/quiet-fog-ekwqd?fil...

reactjs slider next.js carousel keen-io

回答 1 投票 0

如何在轮播下添加下一个和上一个按钮？

我想添加一个下一个 - 上一个按钮到这个旋转木马。更好的是在旋转木马下面并以居中的风格。谢谢你帮助我。我想在这个旋转木马上添加一个下一个 - 上一个按钮。更好的是在旋转木马下方并采用居中样式。谢谢你帮助我。 <section id="slider"> <input type="radio" name="slider" id="s1" /> <input type="radio" name="slider" id="s2" /> <input type="radio" name="slider" id="s3" checked /> <input type="radio" name="slider" id="s4" /> <input type="radio" name="slider" id="s5" /> <label for="s1" id="slide1"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s2" id="slide2"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s3" id="slide3"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s4" id="slide4"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s5" id="slide5"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> </section> <style> [type=radio] { display: none; } #slider { height: 55vw; position: relative; perspective: 1000px; transform-style: preserve-3d; } #slider label { margin: auto; width: 80%; height: 80%; border-radius: 4px; position: absolute; left: 0; right: 0; cursor: pointer; transition: transform 0.4s ease; } #s1:checked ~ #slide4, #s2:checked ~ #slide5, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s5:checked ~ #slide3 { box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); transform: translate3d(-30%,0,-200px); } #s1:checked ~ #slide5, #s2:checked ~ #slide1, #s3:checked ~ #slide2, #s4:checked ~ #slide3, #s5:checked ~ #slide4 { box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2); transform: translate3d(-15%,0,-100px); } #s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3, #s4:checked ~ #slide4, #s5:checked ~ #slide5 { box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19); transform: translate3d(0,0,0); } #s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide4, #s4:checked ~ #slide5, #s5:checked ~ #slide1 { box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2); transform: translate3d(15%,0,-100px); } #s1:checked ~ #slide3, #s2:checked ~ #slide4, #s3:checked ~ #slide5, #s4:checked ~ #slide1, #s5:checked ~ #slide2 { box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); transform: translate3d(30%,0,-200px); } #slide1 { background: #00BCD4 } #slide2 { background: #4CAF50 } #slide3 { background: #CDDC39 } #slide4 { background: #FFC107 } #slide5 { background: #FF5722 } </style>

javascript html css carousel

回答 0 投票 0

猫头鹰轮播的问题是因为某些东西的链接不正确吗？

我正在尝试将 Owl Carousel 合并到我的最新项目中，但我似乎遇到了一些困难。在这一点上，只有 HTML 和 CSS 似乎可以正常运行......

javascript html jquery carousel owl-carousel

回答 0 投票 0

清爽的图片轮播网站总是让我回到第一张图片

我正在使用 VSCode 设计一个简单的图像轮播，用作讲故事的演示。每张图片底部都有一个副标题，用于添加图片描述。本质上，它的两个车...

local-storage carousel page-refresh liveserver

回答 0 投票 0

如何设置引导轮播？

我想从 bootstrap 添加一个旋转木马到我的页面，但它真的让我很难在每个屏幕上设置它，当它在移动设备上看起来不错然后在大屏幕上它会增加图像并削减边......