Как сделать так, чтобы карусельное изображение скользило в папке php laravel из publi c

Question

Я пытаюсь скользить изображения с помощью карусели из папки publi c из php laravel. Файлы загружаются как изображения, которые я разместил. Но я хотел скользить один за другим. Ни один из методов не работает. Это только показывает изображения по одному все сразу. Пожалуйста, посмотрите на это и помогите мне.

Коды для просмотра страницы.

<div id="mycarousel" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner" role="listbox">

         <ol class="carousel-indicators">
                    @foreach($images as $key => $image)
                       <li data-target="#home_main-slider" data-slide-to="{{$key}}" class="carousel-1">
                       </li>
                      @endforeach
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    @foreach( $images as $image )

                     @if ($loop->first)
                      <div class="item image active">
                      @else
                      <div class="item image">
                      @endif

                            <img src="{{ asset('img/' . $image->getFilename()) }}">
                        </div>
                    @endforeach
                </div>
    </div>


    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

    </a>
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

код страницы контроллера: ..

 public function testimonials() {
        $titleName = "Testimonials";
        $images = \File::allFiles(public_path('img'));

        return view('testimonials', compact('titleName'))->with('images', $images);
    }

Answer 1

Ответ

Вам нужно будет импортировать BS3 JS и jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Codepen Link

Вот пример BS3 Carousel, который может помочь - включает в себя все необходимые JS и CSS. codepen.io / darrenkhouston / ручка / vYOKjzP