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

时间:2014-04-01 16:31:05

标签: jquery html twitter-bootstrap magento

我在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,但是这些图片会被正确转换并在我网站的转盘中显示图片。但是,正如你所看到的,控件消失了。

这有什么办法吗?或其他任何我可以添加以保持控件吗?

1 个答案:

答案 0 :(得分:1)

我认为你在'节目编辑'和'隐藏编辑'之间遇到了问题。

如果要粘贴HTML,请确保编辑器隐藏

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

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

这是因为'show / hide'实际上意味着'在文本编辑和WYSIWYG HTML编辑之间切换,并应用一些HTML过滤来尝试纠正错误,因为您在两种模式之间切换'。 / p>

任何在WordPress中使用visual vs text编辑器的人都会熟悉这个问题。 WordPress和Magento都使用TinyMCE编辑器(一个优秀的编辑器,HTML WYSIWYG不容易编码,但我也不认为任何一个应用程序使用最新版本。)

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