Question

我已经将lightSlider jQuery插件集成到我的网站中，但我得到了一个时髦的输出。我已将滑块嵌入Bootstrap面板中以列出图像。（没关系刀片语法）。下面我圈出了渲染html时在屏幕上弹出的问题。

HTML

<div role="tabpanel" class="tab-pane active" id="curations">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Work</h3>
      </div>
      <div class="panel-body">
        @if(is_null($user->posts))
        No work has been uploaded yet.
        @else
        <ul id="light-slider">
            @foreach ($user->posts as $post)
                @if($post->media_type=='image')
                <li data-thumb="{{$post->media_url}}"> 
                    <a href="#">
                        <img class="img-responsive"src="{{$post->media_url}}">
                    </a>
                </li>
                @endif
            @endforeach    
        </ul>
        @endif
      </div>
    </div>
<div>

Answer 1

在同一页面上渲染多个滑块时遇到了同样的问题。我不得不生成一个独特的ID＃34;属性 <ul id="light-slider">

然后单独调用每个滑块。

类似的东西：

 <div role="tabpanel" class="tab-pane active" id="curations">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Work</h3>
      </div>
      <div class="panel-body">
        @if(is_null($user->posts))
        No work has been uploaded yet.
        @else
        <ul id="{{$uniqueSliderID}}">
            @foreach ($user->posts as $post)
                @if($post->media_type=='image')
                <li data-thumb="{{$post->media_url}}"> 
                    <a href="#">
                        <img class="img-responsive"src="{{$post->media_url}}">
                    </a>
                </li>
                @endif
            @endforeach    
        </ul>

        <script type="text/javascript">
             $(document).ready(function() {
               $("{{$uniqueSliderID}}").lightSlider(); 
             });
        </script>
        @endif
      </div>
    </div>
<div>

lightSlider多个控件可见

1 个答案: