構造具有水平滾動條

Question

面板我有我的代碼生成樹枝上的圖像列表：

<div class="text-left row"> 
    <div class="large-12 small-12 columns panel_profile"> 
    {% for adUser in ad.interestedUsers %} 
     {% if adUser.pictureUrl is not empty %} 
      <img class="img_interested" id='idPicture_{{ adUser.id }}' src="{{ asset(adUser.getPictureWeb) }}" style="height: 50px; width: 50px;"/> 
{% else %} 
      {% image 'bundles/delivveweb/images/icon_perfil.png' %} 
      <img id='idPicture' src="{{ asset_url }}" style="height: 50px; width: 50px;"/> 
      {% endimage %} 
     {% endif %} 
    {% endfor %} 
    </div> 
</div> 

我的想法是每一行構建的26張照片面板，13。當圖片編號大於26時，我想水平調出rologem欄以查看其他配置文件。

我一直在使用基礎-5到我的前端。

任何人都可以幫助我或知道已經做到這一點的任何API嗎？ Abaio有一個代碼PA幫助說明

code

Answer 1

先改變我的樹枝代碼由<li>

<div class="large-12 small-12 columns horizontal-scroll-panel"> 
     <ul> 
     {% for adUser in ad.interestedUsers %} 
      {% if loop.index is divisible by(2) %} 
       <br> 
      {% else %} 
       <li> 
      {% endif %} 
       {% if adUser.pictureUrl is not empty %} 
        <img class="img_interested" id='idPicture_{{ adUser.id }}' src="{{ asset(adUser.getPictureWeb) }}" style="height: 50px; width: 50px;"/> 
       {% else %} 
        {% image 'bundles/delivveweb/images/icon_perfil.png' %} 
         <img id='idPicture' src="{{ asset_url }}" style="height: 50px; width: 50px;"/> 
        {% endimage %} 
       {% endif %} 
       </li> 
      {% endfor %} 
     </ul> 
    </div> 

生成兩個圖像列表，然後我不得不做出一些alterarções在css來保證尺寸的div把scroll-x和尺寸在<ul><li>和<img>

<style> 
    .horizontal-scroll-panel { 
      width: 600px; 
      height: 100px; 
      background-color: #ccc; 
      padding-bottom: 20px; 
      overflow-x: hidden; 
      overflow-y: auto; 
      -webkit-overflow-scrolling: touch; 
      -ms-overflow-style: -ms-autohiding-scrollbar; 
      overflow-y: hidden !important; 
      overflow-x: auto; 
     } 
     .horizontal-scroll-panel > ul { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
      -webkit-padding-start: 0; 
      font-size: 0; 
     } 
     .horizontal-scroll-panel li { 
      display: inline-block; 
      border: solid 1px #666; 
      box-shadow: 0 0 4px #666; 
      width: 50px; 
      height: 100px; 
      overflow: hidden; 
      margin-right: 0px; 
      font-size: 0; 
     } 
     .horizontal-scroll-panel li:first-of-type { 
      margin-left: 0 !important; 
     } 
     .horizontal-scroll-panel li:last-of-type { 
      margin-right: 0 !important; 
     } 
     img { 
      height: 50px !important; 
      width: 50px !important; 
      border: 1px solid red !important; 
     } 
     [dir=rtl] .horizontal-scroll-panel li { 
      margin-right: 0 !important; 
      margin-left: 0px !important; 
     } 
     [dir=rtl] .horizontal-scroll-panel li:first-of-type { 
      margin-right: 0 !important; 
     } 
     [dir=rtl] .horizontal-scroll-panel li:last-of-type { 
      margin-left: 0 !important; 
     } 

     @media only screen and (max-device-width: 320px) { 
      .horizontal-scroll-panel { 
      height: 125px; 
      padding: 10px; 
      } 
      .horizontal-scroll-panel li { 
      height: 125px; 
      width: 125px; 
      } 
      .horizontal-scroll-panel img { 
      height: 125px !important; 
      } 
     } 
</style> 

最後這使得由<li>生成的默認列表把一個水平列表

<script> 
$(function() { 
     $.fn.extend({ 
     UIHorizontalScrollPanel : function() { 
      return this.each(function() { 
      var scrollPanel = $(this).find('ul'); 
      var panelsWidth = 0; 
      scrollPanel.find('li').each(function(_, ctx) { 
       panelsWidth += parseInt($(ctx).outerWidth(true)); 
      }); 
      var parentPadding = (parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))); 
      scrollPanel.css('width', (panelsWidth + (parentPadding + parentPadding/2))); 
      }); 
     } 
     }); 
     $('.horizontal-scroll-panel').UIHorizontalScrollPanel(); 
    }); 
</script> 

Function and class that builds a list of images horizontally

祕密