Magento 1.7站点头部轮播图显示<li>序号的隐藏方案求助

核心原因 #

你看到的数字是<ol>有序列表的默认序号，出现这个问题有两个原因：

1. 你写入的轮播代码存在语法错误，导致Bootstrap自带的.carousel-indicators样式没有正常生效，没有清除列表默认样式
2. Magento现有主题的CSS优先级高于你引入的Bootstrap样式，覆盖了列表重置规则

具体修复步骤 #

1. 修正代码语法错误 #

你现有代码存在两处明显错误：

• 第二个轮播项重复设置了active类，会导致轮播切换异常
• 第二张图片的标签多了一个<开头，且模板变量的闭合}}位置错误，破坏了HTML结构

2. 添加强制隐藏序号的CSS #

直接在代码头部加入自定义样式，强制清除指示点列表的默认序号，优先级高于原有样式即可。

修复后完整代码 #

<style>
/* 强制隐藏轮播指示点的默认有序列表序号 */
.carousel-indicators {
  list-style: none !important;
  padding-left: 0 !important;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container-" style="width: 100%;">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img {{retinaurl data-img-src="wysiwyg/banner/ISQ_bigSlider1.png" data-img-srcX2="wysiwyg/banner/ISQ_bigSlider1.png" alt=""}} style="width: 100%; margin-right: 20px;">
      </div>

      <div class="item">
        <img src="{{media url="wysiwyg/banner/ISQ_Safety_Glove_Poster_AprUpdated.jpg"}}" alt="" style="width: 100%; margin-right: 20px;">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

额外说明 #

如果Magento后台编辑器自动过滤了你添加的<style>标签，你可以把这段CSS加到主题的自定义样式文件中，路径一般为skin/frontend/[你的主题包]/[你的主题]/css/custom.css，添加后清空Magento缓存即可生效。

内容的提问来源于stack exchange，提问作者David Holly