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

Question

I use jquery 2 loop to get continuous slide show effect ... http://jquery.malsup.com/cycle2/demo/continuous.php

Here is the 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> 

It works. However, only one image slides across the screen, and then the following appears. I want all the images to slide next to each other, so that 5 appear and get rotated?

Answer 1

Here is an example of what you want if this helps: http://jsfiddle.net/CersX/2/

I basically added a data-cycle-carousel-fluid=true data-cycle-easing="linear" example.

Just change the images for yours.

I based my code on http://codepen.io/colir/pen/bhcAx

Answer 2

Hi, I think you need to set the data-loop-fx = carousel. Try the following:

 <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 check it now, but hope it works.

Cycle2 carousel plugin must be enabled to use the carousel effect.

Answer 3

Here is the answer - carousel-slide-size on jQuery Cycle2 - 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", });