Search code examples
jquery-cycle2

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


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?


Solution

  • 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