How to use jquery cycle 2 continuous slider but more than one image? - jquery-cycle2

Question

I am using jquery cycle 2 to get a continuous slideshow effect...http://jquery.malsup.com/cycle2/demo/continuous.php
Here is code:
<div class="cycle-slideshow cycle-autoinit"
data-cycle-fx="scrollHorz"
data-cycle-slides="> div"
data-cycle-speed="3000"
data-cycle-pause-on-hover="true"
data-cycle-timeout="1"
data-cycle-easing="linear"
data-cycle-carousel-visible=5>
<div>
<a href="#slide.Link" target="_blank">
<img src="#Url.Content("~/content/cms/slideshow/")#slide.ImageName" alt="" /></a>
</div>
<div>
<a href="#slide.Link" target="_blank">
<img src="#Url.Content("~/content/cms/slideshow/")#slide.ImageName" alt="" /></a>
</div>
</div>
This works. However only one image slides across the screen and then the next appears. What i want is all images slides across next to each other so like 5 are appearing and going round on a rotation?

Answer 1

Hi I think you have to set your data-cycle-fx=carousel.
Try this:
<div class="cycle-slideshow cycle-autoinit"
data-cycle-fx="carousel"
data-cycle-slides="> div"
data-cycle-speed="3000"
data-cycle-pause-on-hover="true"
data-cycle-timeout="1"
data-cycle-easing="linear"
data-cycle-carousel-visible=5>
...
I can't test it now but I hope it works.
Cycle2's carousel transition plugin must be included in order to use the carousel effect.

Answer 2

Here is an example of what you want if it helps: http://jsfiddle.net/CersX/2/
I basically added data-cycle-carousel-fluid=true data-cycle-easing="linear" to there example.
Just swap out the images for yours.
I based my code from http://codepen.io/colir/pen/bhcAx

Answer 3

Here's the answer -
carousel-slide-dimension on Jquery Cycle2 -fixed width/height
'carouselSlideDimension' as your argument or:
data-cycle-carousel-slide-dimension=ANUMBER
$this.cycle({
"allowWrap" : false,
"carouselSlideDimension" : "151px",
"carouselVisible" : 3,
"fx" : "carousel",
"log" : false,
"timeout" : 0,
"next" : "#" + id + " .next",
"prev" : "#" + id + " .prev",
"slideActiveClass" : "active",
"slides" : "> .slide",
});