Home » Php » How to make carousel image slide in php laravel from public folder

How to make carousel image slide in php laravel from public folder

Posted by: admin February 25, 2020 Leave a comment


enter image description hereI’m trying to slide images using carousel from public folder of php laravel. The files are loading as the images that i have posted. But i wanted to slide one after the other. None of the methods are working. It’s only showing images one by one all at once. Kindly please look into it and help me.

The codes for view page is.

<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">

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

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

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

    <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 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>


the controller page code is..

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

        return view('testimonials', compact('titleName'))->with('images', $images);
How to&Answers:


You’ll need to import BS3 JS and 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

Here is a BS3 Carousel example that might help – includes all the necessary JS and CSS. codepen.io/darrenkhouston/pen/vYOKjzP