jQuery Cycle plugin : how to show three images in slider at the time

[danieluis]

Hello,

I need to do a slider. I am using Cycle plugin, but I have a problem.
I don't know how to do a slider images container with three
pictures...

All examples are with one images, and the handlers ( prev, next ,
etc .. ) to change the pictures with fantastic effects... but ...

My simple images pool

<div class="cont" id="slide-photos-pool">
<a href="javascript:openSlide(0);" id="slide-photo-1"><img src="images/
img_prueba/thumb_1.jpg" /></a>
<a href="javascript:openSlide(1);" id="slide-photo-2"><img src="images/
img_prueba/thumb_1.jpg" /></a>
<a href="javascript:openSlide(2);" id="slide-photo-3"><img src="images/
img_prueba/thumb_1.jpg" /></a>
<a href="javascript:openSlide(3);" id="slide-photo-4"><img src="images/
img_prueba/thumb_1.jpg" /></a>
</div>

in jQuery code..

jQuery('#slide-photos-pool').cycle({
  fx:     'scrollHorz',
  speed:  700,
  timeout: 0,
  next:   '#slide-photos-pool-siguiente',
  prev:   '#slide-photos-pool-anterior',
  nowrap:  1,
  width: 273,
  fit:1
});

The width images is 91px, but the container is the 273

In action ...

only show the first images...

any suggestions ?

thanks for all, and sorry for my poor english..

daniel

[Josh Nathanson-3]

It sounds like maybe you want a carousel effect rather than cycle.  I think
jCarousel is the most popular carousel plugin.

-- Josh


----- Original Message -----
From: "danieluis" <danieluis@...>
To: "jQuery (English)" <jquery-en@...>
Sent: Tuesday, May 13, 2008 11:50 AM
Subject: [jQuery] jQuery Cycle plugin : how to show three images in slider
at the time

>
> Hello,
>
> I need to do a slider. I am using Cycle plugin, but I have a problem.
> I don't know how to do a slider images container with three
> pictures...
>
> All examples are with one images, and the handlers ( prev, next ,
> etc .. ) to change the pictures with fantastic effects... but ...
>
> My simple images pool
>
> <div class="cont" id="slide-photos-pool">
> <a href="javascript:openSlide(0);" id="slide-photo-1"><img src="images/
> img_prueba/thumb_1.jpg" /></a>
> <a href="javascript:openSlide(1);" id="slide-photo-2"><img src="images/
> img_prueba/thumb_1.jpg" /></a>
> <a href="javascript:openSlide(2);" id="slide-photo-3"><img src="images/
> img_prueba/thumb_1.jpg" /></a>
> <a href="javascript:openSlide(3);" id="slide-photo-4"><img src="images/
> img_prueba/thumb_1.jpg" /></a>
> </div>
>
> in jQuery code..
>
> jQuery('#slide-photos-pool').cycle({
>  fx:     'scrollHorz',
>  speed:  700,
>  timeout: 0,
>  next:   '#slide-photos-pool-siguiente',
>  prev:   '#slide-photos-pool-anterior',
>  nowrap:  1,
>  width: 273,
>  fit:1
> });
>
> The width images is 91px, but the container is the 273
>
> In action ...
>
> only show the first images...
>
> any suggestions ?
>
> thanks for all, and sorry for my poor english..
>
> daniel