Question

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, 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;}

Answer 1

What’s inside your <!-- picture link !--> blocks?
According to the Cycle documentation (and samples) the markup should be like this:

<div id="slider">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <!-- ... -->
</div>

EDIT:

Two pictures in one transition

var curElement = null;

$('#s1').cycle({
    fx:     'scrollHorz',
    prev:   '#prev1',
    next:   '#next1',
    timeout: 0,
    after: function(currSlideElement, nextSlideElement, options, forwardFlag)
    {
      if (forwardFlag === 1 && (currSlideElement != curElement || curElement == null))
      {
          curElement = nextSlideElement;
          $("#next1").trigger('click');
      }
      else if ( forwardFlag === 0 && (currSlideElement != curElement || curElement == null))
      {
          curElement = nextSlideElement;
          $("#prev1").trigger('click');
      }
    }
});

EDIT 2

The problem is a #slider style. Set its width to f.e. 620px

#slider{
    padding:0;
    width:620px;
    margin: 0 auto;
}