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多個控件可見

回答

相關問題