I have the following HTML code:

```
<section class="gallery">
 <a href="" id="link-prev">prev</a>
 <a href="" id="link-next">next</a>
 <div class="holder">
  <ul id="slider">
   <li>
    <img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
   </li>
   <li>
    <img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
   </li>
   <li>
    <img src="" alt="#" width="306" height="240" />
    <span>Picture Title</span>
   </li>
   <li>
    <img src="" alt="#" width="306" height="240" />
    <span>Picture Title</span>
   </li>
  </ul>
 </div>
</section>

```

And the following js:

```
$(document).ready(function(){
    $('#slider').cycle({
        fx:'scrollHorz',
        timeout: 5000,
        prev:'#link-prev',
        next: '#link-next'
    })
    //$(".form-contact form").validate();
})

```

This works fine, but it shows just one picture, and if I want to see the following I click next, and if I want to see the previous, I click prev. How can I show more than one picture per transition?

Basically, like this example: [scroll](http://jquery.malsup.com/cycle/scrollhv.html), but showing more than one picture per transition...

**EDIT**: The actual HTML I have when trying to have two pictures in each slide is this one:

```
<section class="gallery">
 <a href="" id="link-prev">prev</a>
 <a href="" id="link-next">next</a>
 <div class="holder">
  <ul id="slider">
   <div>
    <img src="assets/content/pages/carrousell/UrbanFlame.jpg" alt="#" width="306" height="240" />
    <img src="assets/content/pages/carrousell/TannourineRestaurant.jpg" alt="#" width="306" height="240" />
   </div>
   <div>
  <img src="assets/content/pages/carrousell/PanchoVillaTaqueria.jpg" alt="#" width="306" height="240" />
  <img src="assets/content/pages/carrousell/LaLanterna.jpg" alt="#" width="306" height="240" />
   </div>
  </ul>
 </div>
</section>

```

And the CSS is this one:

```
.gallery .holder{
    border-radius: 10px;
    position:relative;
    padding:4px 0 4px 0px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.gallery #link-prev,
.gallery #link-next{
    position:absolute;
    width:47px;
    height:83px;
    text-indent:-9999px;
    overflow:hidden;
    top:75px;
    z-index:99999;
    background:url(navigati.png) no-repeat;
}
.gallery #link-prev{left:-19px;}
.gallery #link-next{right:-19px;}
.gallery #link-next{background-position:-48px 0;}
.gallery h3{
    color:#33638b;
    font-size:18px;
    line-height:21px;
    margin:0 0 1px;
    text-align:center;
}
#slider{
    padding:0;
    width:306px;
    margin: 0 auto;
}
#slider li{
    list-style:none;
    text-align:center;
    color:#FFFFFF;
    font-size:14px;
    line-height:17px;
    padding:0px 0 0;
    width:306px;
}
#slider img{
    position:relative;
}
#slider span{
    width:286px;
    display:block;
    padding:20px 10px;
    background:url(../images/slider_span_bg.jpg) repeat-x left top; height:18px;}
#slider a{color:#33638b; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:18px;}

```