Question

我正在使用Foundation框架和Orbit。我在这里构建了滑块：http://www.abricot-production-dev.co.uk/group-two/gallery.html# 但目前大拇指并没有改变主要的照片。

我的代码：

<div id="slider">
    <img src="images/slider/image-01.jpg" data-thumb="image-01.jpg" data-caption="#captionOne"/>
    <img src="images/slider/image-02.jpg" data-thumb="image-02.jpg" data-caption="#captionTwo"/>
    <img src="images/slider/image-03.jpg" data-thumb="image-03.jpg" data-caption="#captionThree"/>
</div>

<span class="orbit-caption" id="captionOne">Here is another caption...</span> 
<span class="orbit-caption" id="captionTwo">Here is a caption 2...</span> 
<span class="orbit-caption" id="captionThree">And here is a caption 3...</span>

<ul class="orbit-bullets">
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-01.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">1</li>
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-02.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">2</li>
    <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-03.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">3</li>
</ul>

</div>

初始化：

<script>
   $(window).load(function() {
       $("#slider").orbit();
   });
</script>

在foundation.min.js：

bullets:!1, bulletThumbs:!0, bulletThumbLocation:"../images/slider/thumbs/"

我错过了什么？

安迪

Answer 1

我找到了这个解决方案： http://foundation.zurb.com/docs/components/orbit.html

实现：

<ul class="disc">
  <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-01.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; "data-orbit-link="headline-1">1</li>
  <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-02.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; " data-orbit-link="headline-2">2</li>
  <li class="has-thumb" style="background-image: url(images/slider/thumbs/image-03.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; " data-orbit-link="headline-3">3</li>
</ul>

希望它有效。

干杯。

基础轨道自定义缩略图不更改主图像

1 个答案: