Question

当交换完成其工作时，我无法让轨道触发其作为滑块的自然行为。

JS：

    $(document).foundation('interchange', {
        named_queries : {
            small_range : 'only screen and (min-width:0px) and (max-width: 768px)',
            medium_range : 'only screen and (min-width:769px) and (max-width: 1024px)',
            large_range : 'only screen and (min-width:1025px) and (max-width: 1200px)',
            xlarge_range : 'only screen and (min-width:1201px)',
        }
    });

我在网站的另一部分运行交换，一切正常。我需要在上面的代码中添加obit reflow，打破当前的交换html Orbit设置使用数据attr）。

我试过了：

$(document).foundation('interchange', 'orbit', 'reflow', {

但无济于事。为了澄清Interchange在整个站点中的工作正常，但是当DOM被更改时，滑块行为不会被触发..

Answer 1

我确实解决了我的问题。我使用交换插入带有轨道滑块的html文件用于中型和大型屏幕，但是不同的文件没有用于小屏幕的滑块。由于基础js在加载滑块后已经触发，因此轨道滑块在交换后根本不起作用。我通过在html文件中包含这个来修复它我包括有轨道滑块以便重新调用滑块的js。

<script src="../js/vendor/jquery.js"></script>
    <script src="../js/foundation.min.js"></script>
    <script>
      $(document).foundation('orbit', {
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true
});

包括＆＃39;轨道＆＃39;叫它重新加载滑块并在交换后修复它。这是你的问题吗？

Answer 2

我最近遇到了同样的问题，所以经过多次测试后，这对我有用：

在assets / partials ex：slide.html，large-slider.html等中添加了所有滑块格式。添加了交换插件和新的数据轨道交换属性注意＆替换-zf-interchange＆＃39;关于[数据轨道交换]的事件从刚刚加载的幻灯片中获取图像并等待图像加载然后再次启动插件

一个简单的例子：

html：

<div class="widget large-9 medium-8" data-orbit-interchange data-interchange="[assets/partials/sliders/home-slider.html, small],[assets/partials/sliders/home-slider-large.html, large]"></div>

javascript：

$('[data-orbit-interchange]').on('replaced.zf.interchange', function () {

        var element = $(this).find('.orbit').first();

        var img = $(element).find('.orbit-image').first();

        img.on('load', function() {

            element.foundation();

        });

 });

这不是我猜的最佳解决方案，但它对我有用，

希望这可以提供帮助

使用基础轨道与交换 - 回流问题

2 个答案: