Multiple Items but only move one item at a time

[sbberic]

I saw a few issues filed before that suggests to put multiple items in a single li. My question is, is it possible to increase the viewport to show 3 items instead of 1 and scroll through them 1 item at a time. e.g. 1 | 2 | 3 -> slide right -> 2 | 3 | 4 instead of 1 | 2 | 3 -> slide right -> 4 | 5 | 6

Thanks

[sinsunsan]

I have the same need, I want to show 3 items in a screen but want to show/hide one at a time. So it's not possible to put the 3 items in on li as suggested. Don't know if this lib actually can make this feature.

[revolunet]

having multiple items on a single is really easy, its just a matter of template. group your images in pages :

something like

<ul rn-carousel>
  <li ng-repeat="page in pages">
     <img ng-repeat="image in page.images" ng-src="image.url"/>
  </li>
</ul>

[sinsunsan]

But in this case, how about the transition between each pages. If I understand correctly : For 6 item 1 2 3 4 5 6

with 3 items per pages I would have Page 1 : 1 2 3 Page 2 : 2 3 4 Page 3 : 3 4 5 Page 4 : 4 5 6

Does it create a flickr effect when transitioning ? And it does not allow a translation transition, as the duplication of the images will be evident in that case ?

[revolunet]

i think i misunderstood sorry. someone has to implement a new transitionType for this this is done in the computeCarouselSlideStyle function

[iam4x]

@sbberic @sinsunsan Have you found solutions guys? I need the same feature :)

[abhishek-g]

any updates guys on this... require the same feature.

[brotkel]

It seems like this is already possible, just requires a couple tricks with the CSS. On the carousel ul that has your rn-carousel attributes, set the css to have: width: (width of one of your slides); overflow: visible;

Wrap it inside of a container and set the container's width to whatever you want the total width of the all visible slides of your carousel and overflow: hidden;

The one thing that seems tricky with this is making the control buttons still get pushed to the outer edges of the container, which may just take playing with absolute positioning until you get them where you want them.

Anyone see any issues with this method?

[fracz]

angular-slick have one at a time option that does what you (and I) want.