2015-01-27 1 views
0

Я хотел бы реализовать непрерывный горизонтальный скроллер, показывающий 6 из n миниатюр. это для магазина, для отображения логотипов производителей.JSSOR Непрерывный слайдер, отображающий 6 из n логотипов

я иду от: http://jsfiddle.net/b6qpdyex/3/

с этими настройками:

jQuery(document).ready(function ($) { 
    var options = { 
     $AutoPlay: true, 
     $PlayOrientation: 1, 
     $SlideEasing: $JssorEasing$.$EaseLinear, 
     $AutoPlayInterval: 0, 
     $SlideDuration: 5500, 
     $DisplayPieces: 6 
    }; 
    var manufacturers_scroller = new $JssorSlider$("manufacturers_scroller", options); 
}); 

это мой HTML/умником код

<div class="wrap" id="manufacturers_container"> 
    <h2>Brauereien</h2> 
    <div id="manufacturers_scroller"> 
     <div u="slides" class="scroll-slides"> 
      {foreach item=manufacturer from=$manufacturers name=manufacturers_loop} 
       <div class="manufacturers_box" id="manufacturer{$manufacturer.manufacturers_id}"> 
        <a href="/manufacturer.php?id={$manufacturer.manufacturers_id}"> 
         <img src="/images/{$manufacturer.manufacturers_image}" title="{$manufacturer.manufacturers_name}" /> 
        </a> 
       </div> 
      {/foreach} 
     </div> 
    </div> 
</div> 

и это соответствующий CSS

.manufacturers_box { 
    float: left; 
    text-align: center; 
    margin-bottom: 30px; 
    padding: 0 10px 10px 10px; 
    img { 
    width: 145px; 
    } 
} 
#manufacturers_scroller, .scroll-slides { 
    position: relative; 
    width: 980px; 
    height: 140px; 
    overflow: hidden; 
} 

Предварительный просмотр здесь: http://bierweltweit.kerndter.com/

прокрутки работает, и все в порядке, за исключением того, что «слайды» занимают всю ширину, поэтому одновременно отображается один логотип, я пробовал, но я не могу найти решение.

Спасибо за помощь!

С уважением, Крис

ответ

0

просто установил его сам, добавив ...

$SlideWidth: 165 

:-)

Смежные вопросы