我正在使用帶有插件的orbit-jquery-image-slider插件圖像不滑動嗎？

Question

我正在使用orbit-jquery-image-slider插件，我可以通過執行以下'animation'：'fade'來賦予淡入淡出效果，但無法滑動幻燈片，但我嘗試使用'animation'：'horizo​​ntal-push'但不能正常工作，請幫幫我

<script type="text/javascript">
    $(window).load(function () {
        $('#featured').orbit({
            'animation': 'horizontal-push',
            'bullets': true,
            advanceSpeed: 10000,
        });
        $('.slider-navs').css('position', 'relative');
        $('#featured').css('width', '650px');
        $('#featured').css('height', '210px');

    });

</script>
<div class="holder">
    <div class="above_cont_area " style="height:50px;height: 219px;width: 650px;margin-left: 25px;margin-bottom: 25px;">
        <div id="featured">
            <img src="dummy-images/img1.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img2.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img3.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img4.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img5.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img6.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img7.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img8.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img9.png" data-caption="#htmlCaption" />
        </div>
    </div>

Answer 1

此插件要求所有圖像具有相同的大小。 添加的圖像大小是否相同？ 官方網站在這里

軌道功能將動態確定一組圖像的高度和寬度並相應縮放，但請確保所有圖像的大小相同，或者較大的圖像會從側面窺視。

Answer 2

如果要使用淡入淡出效果，則必須僅將動畫設置為淡入淡出，而不是水平推動

$(window).load(function() {
    $('#featured').orbit({
            'animation': 'fade',
            'bullets': true,
            advanceSpeed: 10000
        });
  });

Answer 3

另一個棘手的問題22是，無法從DOM中隱藏.orbit-timer和.orbit-progress欄，而無顯示或幻燈片停止運行。

見以下

https://github.com/zurb/foundation/issues/1856#issuecomment-19422603