如何在laravel中添加动态滑块

Question

我正在使用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>

Answer 1

<ol class="carousel-indicators">
 <li data-target="#home_main-slider" data-slide-to="0" class="carousel-1">
 </li>
</ol>

更改为

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

因为您需要每张幻灯片的指标。 并且不要为每张幻灯片使用活动类，因此请删除活动类并仅用于某个键。

Answer 2

找到了解决方案here和here