carousel 相关问题

内容的旋转显示，可容纳各种内容，通常包括“下一个”和“前一个”按钮，以旋转内容。

使用 jQuery，如何在单击 Bootstrap 5 轮播时在同一按钮上创建播放/暂停 **HTML ** 使用 jQuery，如何在单击 Bootstrap 5 轮播时在同一按钮上创建播放/暂停 **HTML ** <div id="customSlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500"> <div class="container "> <div class="carousel-indicators customSlider-indi"> <a data-bs-target="#customSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Lorem 1"> <span class="banner-label">Lorem 1</span></a> <a data-bs-target="#customSlider" data-bs-slide-to="1" aria-label="Lorem 2"> <span class="banner-label">Lorem 2</span> </a> <a data-bs-target="#customSlider" data-bs-slide-to="2" aria-label="Lorem 3"> <span class="banner-label">Lorem 3</span> </a> <a data-bs-target="#customSlider" data-bs-slide-to="3" aria-label="Lorem 3"> <span class="banner-label">Lorem 4</span> </a> <a id="playBtn" data-cplay="true" class="play-btn play"> <span class="icon-pause"> </span> <span class="playPauseText">Pause</span> </a>  </div> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://placehold.it/1440x500/210471?text=image_1" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> <div class="carousel-item"> <img src="http://placehold.it/1440x500/210471?text=image_2" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> <div class="carousel-item"> <img src="http://placehold.it/1440x500/210471?text=image_3" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> <div class="carousel-item"> <img src="http://placehold.it/1440x500/210471?text=image_4" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> </div> </div> 风格 .play-btn { width: 38px; height: 38px; border-radius: 5px; background: 0 0; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, .3); padding: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .play-btn .icon-pause { width: 8px; height: 12px; border-left: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 14px; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .play-btn .playPauseText { left: 30px; opacity: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-weight: var(--ds-font-500); font-size: var(--ds-font-16); line-height: 1.4; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .play-btn:is(:hover, :focus) { width: 85px; } .play-btn:is(:hover, :focus) .playPauseText { opacity: 1; } .banner-label { color: #fff; position: relative; bottom: -5px; padding: 0px 3px; } .customSlider-indi { background: transparent; display: flex; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap; gap: 10px; bottom: 20px; padding: 0px 20px; } .customSlider-indi [data-bs-target] { flex: none; font-size: var(--ds-font-16); text-indent: 0; width: auto; background: transparent; position: relative; color: #fff; margin: 0; height: 36px; display: inline-block; border: 0px !important; align-items: center; } .customSlider-indi [data-bs-target]:is(:hover, :focus) { color: #fff; } .customSlider-indi [data-bs-target]::after { content: ""; width: 100%; height: 3px; bottom: 0; padding: 0; position: absolute; display: block; cursor: pointer; border-radius: 2px; background-color: #fff; transition: opacity .6s ease } .custom-cap { position: absolute; height: 100%; width: 100%; top: 0; z-index: 1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; flex-wrap: wrap; color: #fff; } .custom-cap h5 { font-family: var(--ds-font-300); font-size: 56px; color: var(--ds-white); } .custom-cap p { font-size: var(--ds-font-22); font-family: var(--ds-font-300); color: var(--ds-white); } 脚本 var myCarousel = document.querySelector('#customSlider'); var carousel = new bootstrap.Carousel(myCarousel); $('#playBtn').click(function () { if ($(this).data('cplay') == "true") { $(this).data('cplay', 'false'); $(this).removeClass("play"); $(this).addClass("stop"); $(this).find(".playPauseText").text("Pause"); document.querySelector('.stop').addEventListener('click', function () { e.preventDefault(); carousel.pause(); }); } else { $(this).addClass("play"); $(this).data('cplay', 'true'); $(this).removeClass("stop"); $(this).find(".playPauseText").text("Play"); document.querySelector('.play').addEventListener('click', function () { e.preventDefault(); carousel.cycle(); }); } }); 我想让轮播在加载时播放，并有一个暂停/播放按钮来控制它。我已经尝试过了，由于某种原因，我似乎无法让按钮在“暂停”单击时暂停，并在单击“播放”时恢复播放。请帮我解决使用 jQuery 或 JS 的问题这是脚本的修订版本： $(document).ready(function () { var myCarousel = $('#customSlider'); var carousel = new bootstrap.Carousel(myCarousel[0], { interval: 2500, ride: 'carousel' }); // Start the carousel on load carousel.cycle(); $('#playBtn').click(function () { var isPlaying = $(this).data('cplay'); if (isPlaying) { // If the carousel is playing, pause it carousel.pause(); $(this).data('cplay', false); $(this).removeClass("play").addClass("stop"); $(this).find(".playPauseText").text("Play"); } else { // If the carousel is paused, start it carousel.cycle(); $(this).data('cplay', true); $(this).removeClass("stop").addClass("play"); $(this).find(".playPauseText").text("Pause"); } }); });

javascript jquery button carousel bootstrap-5

回答 1 投票 0

如何在 PrimeNG Angular 中的轮播上缩放效果

我需要在轮播上添加放大效果。只有活动图像才应放大。我添加了下面的代码，它按预期工作，但我发现了一个问题。 CSS代码 ::ng-deep p-carousel.p-car...

css angular carousel primeng

回答 1 投票 0

轮播重启中的 JavaScript 转换顺序问题

我正在 JavaScript 中开发手动循环轮播，其中位置更改通过链接到 CSS 属性的数据状态属性进行管理。但是，我遇到了问题

javascript html css carousel

回答 1 投票 0

在浏览器中查看轮播图像，无需上下滚动

> ` .carousel-inner { 高度：0；底部填充：60%； /* 设置轮播纵横比（此处为 4:1）50% 调整图像被切断*/ } .carousel-item { 位置：绝对！重要； /*

javascript html css carousel

回答 2 投票 0

下面光滑的垂直内容已被剪掉

我的光滑中有 14 个项目/步骤，但是如果我单击最后一个点项目，它会显示步骤 13，而步骤 14 已被切断。有什么想法或建议如何解决它？设置光滑高度...

jquery carousel slick.js

回答 1 投票 0

react.js 带箭头的 antd 轮播

我正在考虑使用 antd Caroseul，但我还没有看到创建上一个/下一个或暂停按钮的示例。 const { 轮播 } = antd; ReactDOM.render( 我正在考虑使用 antd Caroseul，但我还没有看到创建上一个/下一个或暂停按钮的示例。 const { Carousel } = antd; ReactDOM.render( <Carousel autoplay> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> </Carousel> , document.getElementById('app')); import React, { Component } from "react"; import { Carousel, Icon } from "antd"; export default class CarouselComponent extends Component { constructor(props) { super(props); this.next = this.next.bind(this); this.previous = this.previous.bind(this); this.carousel = React.createRef(); } next() { this.carousel.next(); } previous() { this.carousel.prev(); } render() { const props = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div> <Icon type="left-circle" onClick={this.previous} /> <Carousel ref={node => (this.carousel = node)} {...props}> <div> <h3>1</h3> </div> <div> <h3>2</h3> </div> <div> <h3>3</h3> </div> <div> <h3>4</h3> </div> </Carousel> <Icon type="right-circle" onClick={this.next} /> </div> ); } } 首先：arrow是一个有效的Carousel属性，可以使用箭头手动控制内容。 antd 默认禁用。您可以像这样启用它： <Carousel arrows> // </Carousel> 但是您不会看到它们，因为 .ant-carousel .slick-prev 和 .ant-carousel .slick-prev 的样式是透明的。此时您已经可以覆盖样式（例如display: block; background: red）。另一个选项是使用 React Slick 属性从 prop 内部控制样式，因为 antd 在 Carousel 组件的底层使用它。这是一个完整的组件示例： import React from 'react' import { Row, Col, Carousel } from 'antd' const contentStyle = { height: '160px', color: '#fff', lineHeight: '160px', textAlign: 'center', background: '#364d79' } // from https://react-slick.neostack.com/docs/example/custom-arrows const SampleNextArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'red' }} onClick={onClick} /> ) } const SamplePrevArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'green' }} onClick={onClick} /> ) } const settings = { nextArrow: <SampleNextArrow />, prevArrow: <SamplePrevArrow /> } const CarouselArrows = () => { return ( <> <Row justify="center"> <Col span={16}> <Carousel arrows {...settings}> <div> <h3 style={contentStyle}>1</h3> </div> <div> <h3 style={contentStyle}>2</h3> </div> <div> <h3 style={contentStyle}>3</h3> </div> <div> <h3 style={contentStyle}>4</h3> </div> </Carousel> </Col> </Row> </> ) } export default CarouselArrows 有一个带有 ::before 属性的 content 选择器有点搞砸了样式（你不能从内联样式覆盖它）。不过，您可以利用它并将箭头功能更改为： const SampleNextArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'red' }} onClick={onClick} /> ) } const SamplePrevArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: 'block', background: 'green' }} onClick={onClick} /> ) } 您可以覆盖默认的 antd 样式以删除 ::before 选择器并包含图标。在 LESS 文件中： .ant-carousel { .slick-next { &::before { content: ''; } } .slick-prev { &::before { content: ''; } } } 在您的组件中（意味着您正在使用上面示例中提供的组件）： import { LeftOutlined, RightOutlined } from '@ant-design/icons' // ... const SampleNextArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, color: 'black', fontSize: '15px', lineHeight: '1.5715' }} onClick={onClick} > <RightOutlined /> </div> ) } const SamplePrevArrow = props => { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, color: 'black', fontSize: '15px', lineHeight: '1.5715' }} onClick={onClick} > <LeftOutlined /> </div> ) } 最后，期望的输出：只需遵循此代码：使用 useRef 钩子并将 Ref 分配给 Carousel，然后通过引用调用 next 和 prev 方法。 import React, { useRef, Fragment } from "react"; import { Carousel } from "antd"; const MyCarousel = () => { const slider = useRef(null); return ( <Fragment > <Button onClick={() => slider.current.next()}>next</Button> <Carousel ref={slider}> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </Carousel> <Button onClick={() => slider.current.next()}>next</Button> </Fragment > )} 如果想添加箭头，可以使用Antd提供的箭头图标 <Carousel arrows nextArrow={<ArrowRightOutlined />} prevArrow={<ArrowLeftOutlined/>}> 由于 Antd css 隐藏了箭头，您可以使用以下代码在自己的 css 中覆盖它： .ant-carousel .slick-prev, .ant-carousel .slick-next { color: unset; font-size: unset; } .ant-carousel .slick-prev:hover, .ant-carousel .slick-next:hover, .ant-carousel .slick-prev:focus, .ant-carousel .slick-next:focus { color: unset; } 在阅读时https://ant.design/components/carousel/我滚动到底部，它说它正在使用https://github.com/akiran/react-slick 如果向下滚动到 prop 表，您可以使用 nextArrow 或 prevArrow，它将 React 元素作为值。我正在使用React Hooks。我刚刚找到结果了。这是示例： function SampleNextArrow(props) { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: "block", background: "red" }} onClick={onClick} /> ) } function SamplePrevArrow(props) { const { className, style, onClick } = props return ( <div className={className} style={{ ...style, display: "block", background: "green" }} onClick={onClick} /> ) } const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 8, nextArrow: <SampleNextArrow />, prevArrow: <SamplePrevArrow />, } <Carousel {...settings} arrows={true} draggable={true}> {koompiApps.map((res, index) => { return ( <Col xs={24} sm={24} md={24} lg={24} xl={24}> <div onClick={(e) => { setAppsKey(`${index + 1}`) }} > <center> <motion.div whileHover={{ scale: 1.1, transition: { duration: 0.3 }, }} whileTap={{ scale: 0.9 }} > <img src={`${res.logo}`} className="koompiApps " alt={res.name} /> <h4 className="appsName">{res.name}</h4> </motion.div> </center> </div> </Col> ) })} </Carousel> 结果：将属性 arrows 设置为 true，则应出现下一个和上一个箭头。但是你看不到它，因为 antd css 将其设置为透明，你可以通过将鼠标悬停在上面来感觉到它们。要使它们可见，您可以安装 slick-carousel npm，并导入 css： @import "~slick-carousel/slick/slick"; @import "~slick-carousel/slick/slick-theme"; 然后设置箭头 css，如下所示： .ant-carousel .slick-arrow::before { font-size: 24px; font-family: 'slick'; color: #000; } 当我们将 arrows 传递给 Carousel 时，它确实可以工作，但主要问题在于 CSS，因为 font-size 和 slick-prev 的默认 slick-next 是 0px。 slick-prev::before和slick-next::before也存在同样的问题我可以推荐这个选项，它只会更改默认样式。谢谢 <Carousel autoplay arrows> <div>Test1</div> <div>Test2</div> </Carousel> .slick-arrow.slick-prev { font-size: 10px; } .ant-carousel .slick-prev::before { content: '<'; display: block; position: relative; bottom: 20px; right: 3px; /* width: 100px; */ font-size: 25px; color: gray; background-color: white; border: 2px solid gray; display: flex; justify-content: center; align-items: center; padding: 5px; border-radius: 50%; width: 33px; height: 33px; } .slick-arrow.slick-next { font-size: 10px; } .ant-carousel .slick-next::before { content: '>'; display: block; position: relative; right: 3px; bottom: 20px; /* width: 100px; */ font-size: 25px; color: gray; background-color: white; border: 2px solid gray; display: flex; justify-content: center; align-items: center; padding: 5px; border-radius: 50%; width: 33px; height: 33px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 您可以将其替换为任何蚂蚁设计图标 //import import { createFromIconfontCN, LeftOutlined, RightOutlined } from '@ant-design/icons'; //definition const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => ( <button {...props} className={ "slick-prev slick-arrow" + (currentSlide === 0 ? " slick-disabled" : "") } aria-hidden="true" aria-disabled={currentSlide === 0 ? true : false} type="button" > <LeftOutlined /> </button> ); const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => ( <button {...props} className={ "slick-next slick-arrow" + (currentSlide === slideCount - 1 ? " slick-disabled" : "") } aria-hidden="true" aria-disabled={currentSlide === slideCount - 1 ? true : false} type="button" > <RightOutlined /> </button> ); //use <Carousel {...settings} prevArrow={<SlickArrowLeft />} nextArrow={<SlickArrowRight />} > 改为这样做 import { Image } from 'antd'; import React from 'react'; const App: React.FC = () => ( <Image.PreviewGroup> <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" /> <Image width={200} src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" /> </Image.PreviewGroup> ); export default App;

reactjs carousel antd

回答 10 投票 0

有人可以解决我的轮播中的错误吗？请

虽然轮播是自动滑动的，但我希望我的卡片一次滑动，但在第一张幻灯片时，一张卡片被滑动，但在接下来的两张卡片一起被滑动。 var multipleCardCarousel = 文档。

javascript html jquery carousel fix-protocol

回答 1 投票 0

Bootstrap 轮播不透明度图像和文本

我正在尝试使用 Bootstrap Carousel 使背景图像处于低不透明度，标题文本处于满容量。我正在尝试找到一种方法来定位每个滑块图像而不带...

css image twitter-bootstrap carousel opacity

回答 1 投票 0

制作带有变化图片的轮播滑块

想要制作像该模板一样的轮播： https://demoapus2.com/houzing/ 产品图片不断变化的轮播！任何人都可以帮忙吗？全部发送如果有人有源码或者学习地址的话...