How to add dynamic slider in laravel

I’m using laravel and I want use slider in my index page, here is my slider code:

<div class="home-slideshow">
                  <div id="home_main-slider" class="carousel slide  main-slider">
                    <ol class="carousel-indicators">
                      <li data-target="#home_main-slider" data-slide-to="0" class="carousel-1"></li>
                    </ol>
                    <div class="carousel-inner">
                      @foreach($banners as $banner)
                      <!-- slider images -->
                      <div class="item image active">
                        <img src="{{url('/')}}/images/{{$banner->slider_one}}" height="362" alt="{{$banner->slider_one_title}}" title="Image Slideshow">
                        <div class="slideshow-caption position-right">
                          <div class="slide-caption">
                            <div class="group-caption">
                              <div class="content">
                                <span class="title_2">
                                  {{$banner->slider_one_title}}
                                </span>
                                <span class="caption">
                                  {{$banner->slider_one_description}}
                                </span>
                              </div>
                              <div class="flex-action"><a class="btn" href="{{$banner->slider_one_link}}">{{$banner->slider_one_button}}</a></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- slider images -->
                      @endforeach
                    </div>
                    <a class="left carousel-control" href="#home_main-slider" data-slide="prev">
                      <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" href="#home_main-slider" data-slide="next">
                      <span class="icon-next"></span>
                    </a>
                  </div>
                </div>

I can get my image, text,etc. but i want to know to get slider buttons work?

UPDATE

this is my latest code base on suggestions, but still slides not changing,

I think something in bottom of slider codes has to change (where next and previous codes are)

<div class="home-slideshow">
                  <div id="home_main-slider" class="carousel slide  main-slider">
                    <ol class="carousel-indicators">
                      @foreach($banners as $key => $banner)
                       <li data-target="#home_main-slider" data-slide-to="{{$key}}" class="carousel-1">
                       </li>
                      @endforeach
                    </ol>
                    <div class="carousel-inner">
                      @foreach($banners as $banner)
                      <!-- slider images -->
                      @if ($loop->first)
                      <div class="item image active">
                      @else
                      <div class="item image">
                      @endif
                        <img src="{{url('/')}}/images/{{$banner->slider_one}}" height="362" alt="{{$banner->slider_one_title}}">
                        <div class="slideshow-caption position-right">
                          <div class="slide-caption">
                            <div class="group-caption">
                              <div class="content">
                                <span class="title_2">
                                  {{$banner->slider_one_title}}
                                </span>
                                <span class="caption">
                                  {{$banner->slider_one_description}}
                                </span>
                              </div>
                              <div class="flex-action"><a class="btn" href="{{$banner->slider_one_link}}">{{$banner->slider_one_button}}</a></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- slider images -->
                      @endforeach
                    </div>
                    <a class="left carousel-control" href="#home_main-slider" data-slide="prev">
                      <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" href="#home_main-slider" data-slide="next">
                      <span class="icon-next"></span>
                    </a>
                  </div>
                </div>
                </div>

Answer

Solution was found here and here