我正在使用laravel，我想在我的索引页使用滑块，这里是我的滑块代码：

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

我可以得到我的图像，文本等，但我想知道得到滑块按钮的工作？

更新

这是我最新的基于建议的代码，但是幻灯片仍然没有改变，

我认为滑块代码底部的某些内容必须更改（下一个和上一个代码的位置）

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