0

我正在使用 Foundation 3 来构建一个站点，并且正在使用它附带的轨道滑块。问题是我的网站设计要求我将滑块导航移动到与幻灯片允许的位置不同的位置。

我的源代码是：

<div id="slide-wrapper">
  <div class="orbit-wrapper" style="width: 1384px; height: 560px;"><div class="slider orbit" style="width: 1384px; height: 560px;">
      <img src="http://domain.com/uploads/sliders/psd1400x558.jpg" alt="slide image" data-caption="#captionId1" class="orbit-slide" style="opacity: 1; z-index: 3; display: block;">
      <img src="http://domain.com/uploads/sliders/banner1.jpg" alt="slide image" data-caption="#captionId2" class="orbit-slide" style="opacity: 0; display: block;">
  </div>
  <div class="slider-nav hide-for-small">
      <span class="right">Right</span>
      <span class="left">Left</span>
  </div>
</div><!--slider-->

<div class="blue-wrapper">
    <div class="left-blue"></div>
    <div class="right-blue"></div>
</div>


<span class="orbit-caption" id="captionId1">
   <h3>Title one</h3>
   <p>Text copy text copy text copy </p>
</span>

<span class="orbit-caption" id="captionId2">
   <h3>Title the Second</h3>
   <p>text copy text copy text copy</p>
</span>

我需要在每个 span.orbit-caption 中移动 div.slider-nav 但是我尝试过的没有按预期工作。

我目前的 jQuery 是：

// Move home slider navigation from .slider to .orbit-caption
$(document).ready(function() {
     $('div.slider-nav').detach().appendTo('span.orbit-caption');
});

请指教。

4

2 回答 2

0

试试这个：

var slider = $('div.slider-nav');
$('span.orbit-caption').each(function(){
   $(this).append(slider.clone());
});

slider.remove();
于 2013-07-01T14:30:57.327 回答
0

查看orbit.js源代码的相关位，用于触发下一个/上一个幻灯片的事件处理程序使用委托事件绑定$slides_container（即滑块包装元素），然后通过下一个/上一个 html 类名称过滤冒泡到该元素的事件（orbit-next/orbit-prev默认情况下）。

这意味着如果您将 prev/next 控件移出滑块包装器，它们将不再起作用，因为单击事件将不再冒泡到包装器（因为它们不再是它的子级）。

第一遍：hacky-hackety-hack

一个 hacky 的解决方法是在任何你喜欢的地方插入新的 prev/next 链接，然后绑定新的事件处理程序来模拟对原始 next/prev 控件的点击（然后可以隐藏，因为它们不需要）：

// not ideal, don't do this unless the second method listed below doesn't work
$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#id-of-your-orbit'),
        $sliderNav = $orbit.find('slider-nav'),
        $oldNextBtn = $sliderNav.find('.left'),
        $oldPrevBtn = $sliderNav.find('.right'),
        $newNextBtns = $captions.find('.your-next-class'),
        $newPrevBtns = $captions.find('.your-prev-class');

    $sliderNav.hide();//hide it but leave in DOM so we can trigger clicks on it's contents below

    $newNextBtns.on('click', function(){
        $oldNextBtn.trigger('click');
    });

    $newPrevBtns.on('click', function(){
        $oldPrevBtn.trigger('click');
    });
});

更好的方法：绑定到现有的自定义事件

但是，一个更简洁的解决方案看起来是在单击控件时仅触发容器元素上的（未记录的 AFAICS）orbit:next-slide或事件，例如：orbit:prev-slide

$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#slide-wrapper'),
        $nextBtns = $captions.find('.your-next-class'),
        $prevBtns = $captions.find('.your-prev-class');

    $orbit.find('slider-nav').remove();

    $nextBtns.on('click', function(){
        $orbit.trigger('orbit:next-slide');
    });

    $prevBtns.on('click', function(){
        $orbit.trigger('orbit:prev-slide');
    });
});

注意我还没有测试过，但是看看源代码它看起来应该可以工作。

于 2013-07-01T15:47:42.113 回答