Question

我正在使用带有angularjs的flexslider，因此使用jquery构建网站的示例并不是很有用。所以我实现了滑块： HTML

<div>
     <flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
        <li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
            <img ng-src="{{imagesUrl}}{{image.custom}}">
        </li>
     </flex-slider>
</div>

在js中我得到一个对象数组，每个对象包含三个字符串（原始路径，自定义大小和拇指）

并覆盖了CSS的大小：

  .flexslider {
          width: 400px;
          height: 400px;
   }

        .flexslider .slides img {
            width: 400px;
            height: 400px;
        }

  .flex-direction-nav a  {
      line-height: 40px;
    }

我有12个缩略图，点击它们工作正常，完全按照他们应该做的;问题是它们都是可见的，显示在三行上。我添加了所请求的类：

<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />

和脚本：

<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>

不知道还能做什么，我发现角度非常差的文档（示例）。有人可以帮忙吗？已经花了一天时间......

修改 plunker for demo：http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD

第二次编辑 好吧，我找到了一个带缩略图工作旋转木马的龙头，但它基本上构建了两个柔性滑块。这是唯一的方法吗？在git（https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html）的示例中，他们使用我的版本？ plunker：http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr

Answer 1

参见我创建的Plunker。这是对您附带的Plunker的修改。根据实现，jQuery与否，您需要拆分图像和缩略图。 http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview

<div id="container" ng-controller="MainCtrl">

    <div class="col-sm-12">

      <flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
        <li>
          <img ng-src="{{image.custom}}">
        </li>
      </flex-slider>
    </div>
    <div class="col-sm-12">
      <flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
        <li>
          <img ng-src="{{image.thumbnail}}">
        </li>
      </flex-slider>
    </div>
  </div>

带有一排缩略图的角度js flexslider

1 个答案: