Zurb基础轨道滑块

Question

我想要一个带图片和视频的滑块。我正在使用Laravel及其刀片模板。我试图这样做，但它不起作用：

<div class="orbit" role="region" data-orbit>
    <ul class="orbit-container">
       <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
       <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
            @foreach($article->medias as $media)
                <li class="is-active orbit-slide">
                    {!! Html::image($media->path) !!}
                </li>
            @endforeach
            @foreach($article->externalMedias as $externalMedia)
                @if($externalMedia->external_service == "youtube")
                    <li class="orbit-slide">
                        <div class="flex-video">
                            <iframe src="{{ 'https://youtube.com/embed/'.$externalMedia->media_id }}"></iframe>
                        </div>
                    </li>
                @elseif ($externalMedia->external_service == "vimeo")
                    <li class="orbit-slide">
                        <div class="flex-video">
                            <iframe src="{{ 'https://player.vimeo.com/video/'.$externalMedia->media_id }}"></iframe>
                        </div>
                    </li>
                @else
                    <li class="orbit-slide">
                        <div class="flex-video">
                            <iframe src="{{ 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/'.$externalMedia->media_id }}"></iframe>
                        </div>
                    </li>
                @endif
            @endforeach
    </ul>
</div>