如何将 Bootstrap 轮播添加到 Magento 页面？

Question

我在我的 Magento 网站的主页上创建了一个 Boostrap 轮播。不过，我遇到了轮播控件的问题。

当我在 Magento 主页的 HTML 编辑器中输入它们时，控件消失了。

这是我在内容 HTML 编辑器中输入的内容：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active"><img src="{{skin url='images/slider/2.jpg'}}" alt="" /></div>
    <div class="item"><img src={{skin url='images/slider/3.jpg'}} alt="" /></div>
    <div class="item"><img src={{skin url='images/slider/4.jpg'}} alt="" /></div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

这是它保存的内容：

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators">
<li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><img src="..." alt="" /></div>
<div class="item"><img src="..." alt="" /></div>
<div class="item"><img src="..." alt="" /></div>
</div>
<!-- Controls --></div>

我已经取出了真实的图像 src，但它们会正确转换并在我的网站上的轮播中显示图像。但是，如您所见，控件消失了。

有没有办法解决这个问题？或者其他任何东西我可以添加以保留控件吗？

Answer 1

我认为您在“显示编辑器”和“隐藏编辑器”之间遇到了问题。

如果您要粘贴 HTML，请确保编辑器隐藏。

如果您在隐藏编辑器的情况下粘贴代码，然后显示编辑器，然后切换回隐藏，您可以看到编辑器更改了您的代码。你会看到你的控件消失了。

隐藏编辑器，粘贴 HTML，保存页面并将“编辑器隐藏”。

发生这种情况是因为“显示/隐藏”实际上意味着“在文本编辑和所见即所得 HTML 编辑之间切换，并在两种模式之间切换时应用一些 HTML 过滤来尝试纠正错误”。

任何在 WordPress 中使用过可视化与文本编辑器的人都会熟悉这个问题。并且 WordPress 和 Magento 都使用 TinyMCE 编辑器（一个优秀的编辑器，HTML WYSIWYG 并不容易编码，但我不认为这两个应用程序都使用最新版本）。

我怀疑发生过滤是因为您的锚标记中没有数据。