我正在使用带有插件的orbit-jquery-image-slider插件图像不滑动吗？

Question

im using orbit-jquery-image-slider plugin i can able give fade effect by doing this 'animation': 'fade' but not able slide image i tried to use 'animation': 'horizontal-push' but not working please help me

<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

This plugin requires all the image have the same size. Do the added images have the same size? The official website is here

The orbit function will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.

Answer 2

If you want the fade effect means you have to give the animation as fade only not horizontal-push

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

Answer 3

Another tricky catch 22, is that the .orbit-timer and .orbit-progress bar can't be hidden from the DOM with display none or the slideshow stops functioning.

See the following

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