lightSlider多个控件可见

我已经集成了lightSlider jQuery插件到我的网站，但即时通讯得到一个时髦的输出。我已经将滑块嵌入到Bootstrap面板中以列出图像（不要介意刀片语法）。下面我画了HTML渲染时在屏幕上弹出的问题。 lightSlider多个控件可见

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>

来源

2016-02-20 alaboudi

你最好建立在CODEPEN或的jsfiddle一个例子生成您在网站上看到的错误。否则，不可能诊断和解决错误。 –

我在同一个页面上呈现多个滑块时有同样的问题。我必须为 <ul id="light-slider">

生成一个唯一的“ID”属性然后分别调用每个滑块。

喜欢的东西：

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

来源

2016-08-02 22:23:08

lightSlider多个控件可见

回答

相关问题