Javascript/php旋转木马无法正常工作

我正在为网页编写幻灯片/旋转木马。我刚开始让PHP遍历一个图像文件夹，这样我就可以使用幻灯片来显示未定义数量的图像。不幸的是，由于对PHP for循环进行了更改，我的JavaScript本应在幻灯片播放到最后一张照片时重新开始，但却不起作用。我有一种感觉，我对PHP的使用扰乱了我的DOM结构，但我不知道如何弄清楚这是否是问题所在，如果是，如何修复它

<div class="slider">
        <?php
            $output = '';
            $dir = dirname(__FILE__).'/img';
            $images = scandir($dir);
            if($images)
            {
                foreach($images as $image)
                {
                    if(in_array($image,array('.','..'))) continue;
                    ?>
                    <div class="slide slide-feature">
                        <div class="container">
                            <div class="row">
                                <div class="col-xs-12">
                                    <a href="#"><img src="img/<?php echo $image ?>" ></a>
                                </div>
                            </div>
                        </div>
                    </div>
        <?php
                }
            }
        ?>

下面是JS，它应该允许我浏览照片：

var carousel = function() {
    /*$('.tabs').children().children().click(function() {
        $(this).siblings().removeClass('.active');
        $(this).addClass('.active');
    });*/
    $('.arrow-next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        if(nextSlide.length == 0)
        {
            nextSlide = $('.slide').first();
        }
        currentSlide.fadeOut(750).removeClass('active-slide');
        nextSlide.fadeIn(750).addClass('active-slide');
    });
    $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();
        if(prevSlide.length == 0)
        {
            prevSlide = $('.slide').last();
        }
        currentSlide.fadeOut(750).removeClass('active-slide');
        prevSlide.fadeIn(750).addClass('active-slide');
    });
};
window.onload = carousel();

感谢您的帮助。谢谢Zachary Mason