添加Bootstrap Carousel到magento页面



我已经尝试添加bootstrap carousel到我的magento网站和它的工作也,但问题是,我看不到导航箭头..

我代码:

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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" role="listbox">
  <div class="item active">
    <img src="{{media url="wysiwyg/FB_banner2.jpg"}}" alt="Chania" width="100%" height="345">
  </div>
  <div class="item">
    <img src="{{media url="wysiwyg/FB_banner_1.jpg"}}" alt="Chania" width="100%" height="345">
  </div>
  <div class="item">
    <img src="{{media url="wysiwyg/FB_banner_8.jpg"}}" alt="Flower" width="100%" height="345">
  </div>
  <div class="item">
    <img src="{{media url="wysiwyg/FB_banner_12.jpg"}}" alt="Flower" width="100%" height="345">
  </div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

,我的输出是:输出

我想为左右移动添加箭头

我认为你需要在caroucel包装器中移动previous和next按钮的锚标记。

查看示例:https://v4-alpha.getbootstrap.com/components/carousel/

尝试将它们移动到包装器的内部/底部:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
   <a>...</a>
   <a>...</a>
</div>

我想你在链接锚之后缺少了几个结束div标签。

最新更新