CODEWITHSUNDEEP
jqueryjquery-cycle
B L Praveen
B L Praveen

Reputation: 2010

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?

Upvotes: 0

Views: 10348

Answers (2)

Karmacoma
Karmacoma

Reputation: 668

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>

Upvotes: 0

Joke_Sense10
Joke_Sense10

Reputation: 5412

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

Upvotes: 0

Related Questions