JQuery Roundabout: изменение количества отображаемых элементов - PullRequest
Новая
       15

JQuery Roundabout: изменение количества отображаемых элементов

2 голосов
/ 21 января 2012

Я использую плагин jQuery Roundabout.Мне интересно, есть ли способ выбрать количество картинок, которые будут показаны.У меня есть десять картинок, но только три из них должны быть видны, как показано во второй (расширенной) ссылке в «квадратном» примере.

Как это возможно?

Редактировать с дополнительной информацией:

jquery roundabout-plugin: http://fredhq.com/projects/roundabout

и расширение: http://fredhq.com/projects/roundabout-shapes/

-> Я хотел бы иметь «квадратную форму»

соответствующий код: 

<head>
<style>
.roundabout-holder {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  height: 500px;
  width: 300px;
}

.roundabout-moveable-item {
  cursor: pointer;
  border: 1px solid #999;
  bottom: 0;
}

.roundabout-in-focus {
  cursor: auto;
}
</style>

<script type="text/javascript" src="../../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.roundabout.js"></script> 
<script type="text/javascript" src="../../js/jquery.roundabout-shapes.js"></script> 

<script>
   $(document).ready(function() {
      $('ul.roundabout-holder').roundabout({
         shape: 'square',
         btnNext: ".next",
         btnPrev: ".prev",
         btnStopAutoplay: ".stop",       
         btnStartAutoplay: ".start",                 
         duration: 1000,
         autoplay: true,
         autoplayDuration: 4000,         
         autoplayPauseOnHover: true,
         reflect: false,
         minOpacity: 0.5,
         minScale: 0.1
      });
   });
</script>  



</head>

<body>

<ul class="roundabout-holder">
    <li class="roundabout-moveable-item"><a href="img/hauptbild-gross.jpg"><img src="img/hauptbild.jpg" width="466" height="500" /></a></li>                
    <li class="roundabout-moveable-item"><a href="img/baerenfamilie-gross.jpg"><img src="img/baerenfamilie.jpg" width="400" height="196" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hamster-bleistift-gross.jpg"><img src="img/hamster-bleistift.jpg" width="400" height="351" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hamster-schlafend-gross.jpg"><img src="img/hamster-schlafend.jpg" width="400" height="302" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hamster-schmetterling-gross.jpg"><img src="img/hamster-schmetterling.jpg" width="400" height="374" /></a></li>
    <li class="roundabout-moveable-item"><a href="img/hase-gross.jpg"><img src="img/hase.jpg" width="384" height="500" /></a></li>
</ul>



</body>

</html>

А вот и URL-адрес проекта: http://www.eyes -on-fire.de / test / 2 / portfolio / tiere / index.php

(мне не разрешалось публиковать три ссылки как новичок)

1 Ответ

0 голосов
/ 21 мая 2012

Не вдаваясь в детали: 

maxScale: 1,
minScale: 0.7

должен сделать трюк.

Идея состоит в том, чтобы отрегулировать minScale и maxScale в соответствии с шириной / высотой вашего контейнера, в зависимости от обстоятельств, чтобы вы видели именно то количество изображений / слайдов, которые вы хотите видеть.

...