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

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?

did you figure this out? If so can you post solution? Thks – Laurence Cope Apr 24 '14 at 16:14 — Laurence Cope, Apr 24 '14 at 16:14

score 2 · Answer 1 · edited Jul 24 '17 at 09:23

2

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.

edited Jul 24 '17 at 09:23

Martijn

15,791
4
36
68

answered May 16 '13 at 10:44

Maurizio In denmark

4,226
2
30
64

Added a downloadlink – Martijn Jul 24 '17 at 09:23

score 0 · Accepted Answer · answered Jun 17 '13 at 04:32

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

score 0 · Answer 3 · edited May 23 '17 at 12:14

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

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

3 Answers3