Bulma Carousel -使箭头更大

Bulma Carousel 是一个基于 Bulma CSS 框架的轮播组件，它允许你在网页上展示一系列的图片或内容。如果你想要使轮播组件的箭头更大，可以通过自定义 CSS 来实现。

基础概念

Bulma 是一个基于 Flexbox 的现代、响应式、易于使用的 CSS 框架。它提供了一系列的预定义样式和组件，可以帮助开发者快速构建美观的网页。Carousel 组件是其中之一，用于创建滑动展示内容的轮播效果。

类型

Bulma Carousel 主要有以下几种类型：

图片轮播：展示一系列图片。
内容轮播：展示一系列文本内容或其他 HTML 元素。

应用场景

产品展示：在电商网站上展示产品图片。
新闻更新：在新闻网站上展示最新的新闻内容。
活动推广：在活动页面上展示活动的图片和信息。

如何使箭头更大

要使 Bulma Carousel 的箭头更大，可以通过覆盖默认的 CSS 样式来实现。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Carousel</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <style>
    .carousel-arrow {
      font-size: 2rem; /* 增加箭头的大小 */
      width: 3rem; /* 增加箭头的宽度 */
      height: 3rem; /* 增加箭头的高度 */
    }
  </style>
</head>
<body>
  <div class="carousel">
    <!-- 轮播内容 -->
    <div class="carousel-item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <!-- 其他轮播项 -->
    
    <!-- 箭头按钮 -->
    <button class="carousel-arrow carousel-prev">❮</button>
    <button class="carousel-arrow carousel-next">❯</button>
  </div>

  <script>
    // 轮播逻辑（假设使用了一个轮播库）
    // ...
  </script>
</body>
</html>

解决问题的原因

默认情况下，Bulma Carousel 的箭头大小可能不符合你的需求。通过自定义 CSS 类 .carousel-arrow，你可以调整箭头的大小、宽度和高度，使其更适合你的设计。

参考链接

通过以上方法，你可以轻松地调整 Bulma Carousel 的箭头大小，以满足你的设计需求。

页面内容是否对你有帮助？

有帮助

没帮助

Bulma Carousel -使箭头更大

、、、、

如何使侧面的箭头变得更大(这样它们就不会被忽略)？ ?

浏览 65提问于2021-11-18得票数 0

1回答

(在Bulma )

、、

如何使用Bulma将平板(和更大屏幕)的列的内容集中起来，并使内容与移动设备的内容对齐？

浏览 0提问于2018-12-12得票数 0

回答已采纳

2回答

如何使用样式组件创建箭头

、、

我试图使我的橙色箭头看起来像粉红箭头，而不必使用外部CSS库如bulma，粉红色箭头使用的库，这就是为什么它看起来是这样的。粉红色箭头的代码与我在下面共享的代码完全相同，唯一的区别是它们在sass文件中包含了bulma。

浏览 9提问于2022-03-11得票数 0

回答已采纳

2回答

如何使旋转木马固定覆盖的Bootstrap 4.1？

、

我想轮播覆盖Bootstrap 4.1，但. carousel -control-prev-icon和carousel-control-next-icon不起作用。如何运行图标？"container-fluid"> <div id="carouselExampleIndicators" class="carouselslide" data-ride="<

浏览 31提问于2019-01-10得票数 1

回答已采纳

3回答

变箭头填充引导旋转木马角

、、

我不知道如何改变角引导旋转木马中箭头之间的填充/间距我希望箭头的每个大小的间距更小，所以黑色的间距得到了更大的空间。我的代码：<ngb-carousel *ngIf="images"> <div classpicsum-img-wrapper&quo

浏览 10提问于2022-02-14得票数 0

2回答

居中滑块控制字形图标

、、、

我有一个滑块与2个箭头控制通过图像导航。我想为这些箭头添加一个背景，并使它们成为圆形。但是这个问题当我向箭头添加填充时，箭头不再在圆圈内居中。下面是CSS： .item{} display: inline !: 50%; } HTML： <div id="carousel-example-generic" c

浏览 26提问于2019-08-30得票数 1

1回答

自举旋转木马控制响应

、

如何使左箭头和右箭头响应。下面附上响应设备的屏幕截图移动视图 position: absolute; color:#C21B17; font-size:30px; margin-left: -40px; height:60px;} .

浏览 2提问于2017-05-08得票数 0

2回答

如何在Angular 7应用中使用ngb-carousel？

、、、

我被建议使用ng-bootstrap carousel，而不是使用Bootstrap4 carousel - found <ngb-carousel *ngIf="images"> <img [src]="images[0]" alt="Random

浏览 0提问于2019-05-15得票数 1

4回答

默认引导轮播控件(左箭头和右箭头)具有跨越轮播中图像高度的100%的链接。我很抱歉，因为这可能是一个愚蠢的问题，但你如何改变这一点，使链接只超过箭头本身的宽度和高度？您可以在Boostrap文档()上的" carousel“下看到我所指的示例，旋转木马的代码如下所示。<div id="carousel-example-generic" class="carousel slide" data-ride="<

浏览 0提问于2017-09-17得票数 1

1回答

使qt日历箭头更大

、、、、

我把日历和它的字体变大了，但是我不知道怎么把日历上的箭头也变大。我所说的箭头，是指顶部的绿色箭头，它可以让你来回移动。我正在使用Python2.7，并使用PyQt4。使用QCalendarWidget创建日历- cal = QtGui.QCalendarWidget(self) 图像:您可以看到箭头与日历的大小不成比例。 ?

浏览 32提问于2019-05-22得票数 2

回答已采纳

1回答

向owl轮播模板添加箭头和自动播放

、、、

我下载了一个owl.carousel.min.js的模板-我不知道如何添加自动播放和箭头。它在上的测试服务器上运行了大约一半。我非常感谢任何帮助，因为我精通HTML，但JS超出了我的能力。

浏览 4提问于2017-06-22得票数 0

6回答

在Twitter Bootstrap 2.0中控制Carousel

、、

我正在测试bootstrap 2.0中新的carousel功能，但是在使导航箭头正常工作时遇到了困难。目前文档有点少，而且我还是个新手。-- Carousel caption --> <!

浏览 8提问于2012-02-06得票数 1

1回答

如何使猫头鹰旋转木马键盘可访问

、、、、

根据，为了使网站被认为是可访问的，您应该能够使用键盘实现内容的所有功能： $('.carousel-left-arrow').click(function () { }); 但是，这些箭头不能使用键盘访问，只能使用鼠标。

浏览 1提问于2016-11-23得票数 2

1回答

我如何使标记完全重叠，使它不会在同一端出现两次？

、、、

我试图实现一个突出显示功能，使箭头更大，并改变它的颜色。但问题是，当宽度变化时，两个末端标记之一(箭头)变得更大，但在较小的标记上也不重叠。我如何使它重叠，使它们看起来像一个更大的箭头而不是两个箭头带有突出显示的我的代码 const [start, target]

浏览 0提问于2020-03-08得票数 4

回答已采纳

1回答

将旋转木马控制箭头从旋转木马框架中取出

、、

然而，我一直试图通过重写CSS (用我自己的)从框架中获取旋转木马控制箭头，但是没有运气。我已经尝试过这个中的建议，但仍然没有成功。作为解决办法，我使用AngularJS的脚本指令定义了自己的旋转木马控制箭头类，而不是从引导程序中预定义的箭头类： <divclass='carousel' ng-mouseenter="pause()" ng-mouseleave

浏览 2提问于2015-02-23得票数 0

回答已采纳

1回答

如何使delphi的滚动条更宽/更大(包括滚动条的箭头)

、

为了便于访问，我需要使所有可滚动控件(列表、列表视图)的滚动条更宽，滚动条箭头更大。如何从可滚动控件(例如: TListView)获得滚动条(句柄)？如何使滚动条和箭头更宽/更大?

浏览 3提问于2009-02-21得票数 4

回答已采纳

2回答

如何浮动左旋转木马左控制？

<a class="left carousel-control" href="#mainCarousel" data-slide="prev" style="margin: 348px 0 0 770px">&lsaquo;</a> <a class="right carousel-control" href="#mainCarousel" data-slide="next&

浏览 4提问于2013-06-27得票数 1

1回答

wordpress引导滑块旋转木马

、

如何使旋转木马调用特定类别而不是显示wordpress中的所有帖子非常感谢你的帮助！谢谢

浏览 4提问于2012-12-03得票数 0

2回答

角，用函数改变类变量/属性

export class TestimonialComponent { setInterval(function() { }, 1000); this.Carousel(); }根据我的理解，ngOnInit与类共享slideNumber，但是Carousel函数声明了

浏览 5提问于2020-07-01得票数 0

回答已采纳

2回答

垂直圆滑旋转木马箭头

、、

我正在尝试制作一个垂直的圆滑旋转木马，但我不知道如何使箭头也垂直。$('.offer-page-carousel').slick({ vertical: true, verticalSwiping当前箭头位于旋转木马的右侧(默认情况下)。我想把它放在旋转木马的底部。有没有什么办法可以用CSS实现这一点？

浏览 17提问于2017-12-15得票数 3

点击加载更多