'Jquery Cycle Slider Carousel

I am having problem with jquery cycle carousel to slide vertical with 4 visible items

I have put he slider in Jsfiddle to test

 $('#list_post').cycle({ 
    timeout:    1000,
    fx:      'carousel',
    slides: '> div',
    speed: 500
  });     
<div id="list_post" class='list-box' data-cycle-carousel-vertical="true" 
data-cycle-carousel-fluid="true" data-cycle-carousel-visible="4">
   <div class="slides"></div>
   <div class="slides"></div>
   <div class="slides"></div>
   <div class="slides"></div>
</div>

Slider resize into small width and shows only one item in slide. How to make 4 items visible in slider?

jqueryjquery-cycle


Solution 1:[1]

If you want all the four items to be visible you can go with alternative way by changing property fx to fade.

 $('#list_post').cycle({ 
 timeout:    1000,
 fx:      'fade',
 slides: '> div',
 speed: 500
 });

Demo

Solution 2:[2]

Maybe someone who wants to solve it.

If you want carousel structure based jQuery Cycle, you can use Cycle2.

Example:

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=0
    data-cycle-next="#next4"
    data-cycle-prev="#prev4"
    data-cycle-pager="#pager4"
    data-cycle-carousel-visible=5
    data-allow-wrap=false
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    ...
    <img src="http://malsup.github.io/images/beach9.jpg">
</div>

<div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
</div>

<div class="cycle-pager" id=pager4></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joke_Sense10
Solution 2 Karmacoma

Related Questions