carousel 相关问题

我在我的react js项目中使用alice carousel，我需要添加自定义箭头，但我担心我无法在箭头中获得禁用类，任何人都可以帮助我吗？我在我的react js项目中使用alice carousel，我需要添加自定义箭头，但我担心我无法在箭头中获得禁用类，任何人都可以帮助我吗？ <AliceCarousel mouseTracking disableDotsControls responsive={{ 0: { items: 1 } }} renderPrevButton={() => { return ( <a className={`${activeIndex > 0 ? 'active' : '' } slide-prev mr-2 cursor-pointer`} > <LeftArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' /> </a> ); }} renderNextButton={() => { return ( <a className={`${activeIndex < 1 ? 'active' : '' } slide-next mr-2 cursor-pointer`} > <RightArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' /> </a> ); }} onSlideChanged={(e) => setActiveIndex(e.item)} > disabled类通常用于指示元素或按钮不可点击或不可交互。但是，就您而言，您似乎想根据 activeIndex 状态有条件地应用该类。 <AliceCarousel // ... (other props) renderPrevButton={() => { return ( <a className={`slide-prev mr-2 cursor-pointer ${ activeIndex > 0 ? 'active' : 'disabled' }`} > <LeftArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' /> </a> ); }} renderNextButton={() => { return ( <a className={`slide-next mr-2 cursor-pointer ${ activeIndex < 1 ? 'active' : 'disabled' }`} > <RightArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' /> </a> ); }} onSlideChanged={(e) => setActiveIndex(e.item)} > {/* ... (carousel content) */} </AliceCarousel>

javascript reactjs carousel

回答 1 投票 0

如何在 Laravel 的轮播中使用 foreach 循环？

我正在尝试在 Laravel 中构建动态轮播，但遇到只显示单个图像的问题。尽管花了几个小时来寻找解决方案，但我...

javascript php html laravel carousel

回答 1 投票 0

滑动滑块中的样式中心填充

如何设置 slick.js 滑块中 centerPadding 的样式？我想设置填充的不透明度，但不是轨道中的所有项目。 $('.ourgroup-carousel').slick({ 无限：真实，幻灯片ToSho...

javascript jquery carousel slick.js

回答 2 投票 0

如何在ant design carousel中不固定卡片的情况下使卡片具有相同的高度？

无法使antd Carousel内部渲染的卡片高度相同唯一有效的是固定卡片高度，这是一个坏主意，因为我不知道文本长度

next.js carousel height antd card

回答 1 投票 0

代理轮播未显示

我正在使用 MyHome 主题开发 WordPress 网站。我将代理添加到站点的代理轮播中，但轮播未显示。谁能告诉我我做错了什么？预先感谢您！

wordpress themes carousel

回答 1 投票 0

React：为什么只有在使用 Chrome 浏览器时，我的移动幻灯片上的灵敏度才会混乱？

我的 React Web 应用程序上有一个轮播组件。它在 Firefox 上工作得很好，但是在 Chrome 中，当我在移动设备上向下滑动页面时，它认为我正在做水平滑动并切换幻灯片......

javascript html css reactjs carousel

回答 1 投票 0

React-Multi-Carousel 在无限模式下的数据索引不正确

我想制作中间项目（活动项目）比其他项目更大的轮播滑块。就像下面这张图一样所以我使用react-multi-carousel的回调函数我想制作中间项目（活动项目）比其他项目更大的轮播滑块。就像下面这张图一样所以我使用了react-multi-carousel的回调函数 <Carousel className="relative" responsive={responsiveCarouselTournamentBanner} // autoPlay={true} autoPlaySpeed={3000} infinite arrows={false} itemClass="custom-item-class" // centerMode={true} slidesToSlide={1} beforeChange={(nextSlide, current) => { console.log("Before Change: ", nextSlide, "Current: ", current) setSlideIndex(nextSlide) }} // containerClass={`${ // slideIndex % 2 === 0 ? "custom-container-odd" : "custom-container-even" // }`} > {data?.banners?.map((item, index) => ( <img key={index} data-index={index} src={item || "/images/tournament-img-default.png"} className="w-full max-w-[90%] h-[210px] md:max-w-[858px] md:h-[482px] object-cover mx-auto rounded-xl banner-primary-color" alt="dgg-banner" /> // <div key={index}>ABC</div> ))} </Carousel> 像这样。我想在 beforeChange 中使用 nextSlide,current 中的 SlideIndex。但在无限模式下，totalItems 将会翻倍。而且我无法控制轮播中的物品。所以我想问我的问题来处理像这样的轮播案例。非常感谢。我为这个问题苦苦挣扎了一个星期。我有同样的问题这里（GitHub）！为了解决这个问题，我创建了一个解析活动幻灯片（changeSlide）的函数。仅当轮播设置为 ltr（默认设置）时它才有效。我正在使用 Tailwind，所以你可能也想看看。 const responsive = { superLargeDesktop: { // the naming can be any, depends on you. breakpoint: { max: 4000, min: 3000 }, items: 1 }, desktop: { breakpoint: { max: 3000, min: 1024 }, items: 1 }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 1 }, mobile: { breakpoint: { max: 464, min: 0 }, items: 1 } }; const [activeIndex, setActiveIndex] = useState(0) const images = [ { src: slide1, alt: "", }, { src: slide2, alt: "", }, { src: slide3, alt: "", }, { src: slide4, alt: "", }, ] const changeSlide = (previousSlide: number, currentSlide: number, dataSize: number) => { let activeSlide = 0 // right arrow if (previousSlide < currentSlide) activeSlide = currentSlide - 2 === dataSize ? 0 : currentSlide - 2 // left arrow else activeSlide = currentSlide + (currentSlide <= dataSize && currentSlide >= 2 ? -2 : dataSize - 2); setActiveIndex(activeSlide) } 轮播应该是这样的： <Carousel infinite autoPlay centerMode responsive={responsive} className="w-full h-[70%] owl-carousel owl-theme text-center" itemClass="px-1 flex justify-center" keyBoardControl={true} // changeSlide(previousSlide, currentSlide, dataSize = images.length) afterChange={(previousSlide, { currentSlide }) => changeSlide(previousSlide, currentSlide, images.length)} > {images.map((img, i) => ( <div key={`slide-${i}`} className={`relative ${activeIndex !== i ? "w-[90%]" : "w-full"} h-full rounded-[10px] flex justify-center items-center bg-transparent shadow-[10px_40px_10px_5px_black]`} > {activeIndex !== i ? <img className='pointer-events-none object-contain rounded-[10px] opacity-10' src={img.src} alt={img.alt} /> : <img key={`slide-img-${activeIndex}`} className='object-contain rounded-[10px]' src={img.src} alt={img.alt} /> } </div> ) )} </Carousel> 我希望这有帮助！要创建中间有较大活动项目的轮播/滑块，您可以修改代码以达到所需的效果。以下是如何实现它的示例：首先，定义轮播的响应式设置： const responsiveCarouselTournamentBanner = { superLargeDesktop: { breakpoint: { max: 4000, min: 3000 }, items: 5, }, desktop: { breakpoint: { max: 3000, min: 1024 }, items: 3, }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 2, }, mobile: { breakpoint: { max: 464, min: 0 }, items: 1, }, }; 然后，在 JSX 代码中，使用 beforeChange 回调来更新活动幻灯片索引并根据活动幻灯片调整样式： <Carousel className="relative" responsive={responsiveCarouselTournamentBanner} autoPlay={true} autoPlaySpeed={3000} infinite arrows={false} itemClass="custom-item-class" centerMode centerSlidePercentage={80} slidesToSlide={1} beforeChange={(nextSlide, currentSlide) => { setSlideIndex(nextSlide); }} > {data?.banners?.map((item, index) => ( <div key={index} className={`${ slideIndex === index ? 'active-slide' : '' } custom-slide`} > <img src={item || '/images/tournament-img-default.png'} className="w-full h-[210px] md:h-[482px] object-cover mx-auto rounded-xl banner-primary-color" alt="dgg-banner" /> </div> ))} </Carousel> 您可以向活动幻灯片和自定义幻灯片类添加 CSS 样式，以控制活动和非活动幻灯片的外观。确保根据您的具体要求和设计调整代码和样式。

javascript reactjs next.js carousel react-multi-carousel

回答 2 投票 0

有人可以帮我创建这个轮播吗？

这个轮播我想使用react创建轮播。我不知道该怎么做。谁能帮我创建这个轮播？我尝试了react-pure-carousel包，它看起来不像我的......

css reactjs slider carousel

回答 1 投票 0

carousel 相关问题

最新问题