jquery - 如何重新设计 Bootstrap slider

标签 jquery css twitter-bootstrap bootstrap-4 slider

我试图用新的“旋转木马”改变前一个和下一个设计,我尝试使用这段代码

.carousel-control-prev {
  content: 'prev';
  font-size: 55px;
  color: red;
}
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

我尝试做的是:

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="swiper-button-prev swiper-button-white" aria-hidden="true">
      <div class="swiper-button-prev swiper-button-white">prev</div>
  </span>
  <!--
  <span class="sr-only">Previous</span>
  -->
</a>

最佳答案

改变了 carousel prev 和 next 的设计...有什么问题?

编辑 2:为箭头插入 HTML 实体。去除文字装饰

.carousel-control {
  font-size: 55px;
  color: red;
  text-decoration: none;
}
<a class="carousel-control-prev carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="swiper-button-prev swiper-button-white" aria-hidden="true">
    <div class="swiper-button-prev swiper-button-white">&rsaquo;</div>
  </span>
</a>

 <a class="carousel-control-next carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">&lsaquo;</span>
</a>

关于jquery - 如何重新设计 Bootstrap slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55618146/

相关文章:

twitter-bootstrap - Bootstrap 中带边框的 3 列之间的空间

php 正则表达式函数无法转换 JavaScript 参数

javascript - 如何将特定的 div 放在其他 div 之前?

javascript - 根据复选框禁用/启用按钮

css - 使表格单元格正方形

javascript - 使用 jQuery 提交按钮在 IE9 和 FF9 中不起作用

javascript - 使用 Bootstrap 菜单选择元素后更改菜单名称

html - 如何仅将某些规则应用于其文本内容而不是其子项

javascript - jquery匹配具有px样式字体大小的元素

javascript - 如何使用 jquery $.proxy 事件附加获取当前选定的值