It is a finite horizontal slider which shows up to three Cards initially depending on the viewport. A partial item on the edge indicates hidden items which can be brought into view via the swipe gesture or the control buttons. The Card Slider works great if you want to use five or more items which should be comparable on one level.
See it in light scheme
See it in dark scheme
Card 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn.
Card 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sed sapiente possimus adipisci aspernatur explicabo.
Card 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis tempora ratione rem iustoe.
Card 4
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod debitis, corrupti expedita ullam odit obcaecati molestiae numquam atque.
Card 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas modi id consectetur, adipisci reprehenderit.
Card 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn.
Card 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sed sapiente possimus adipisci aspernatur explicabo.
Card 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis tempora ratione rem iustoe.
Card 4
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod debitis, corrupti expedita ullam odit obcaecati molestiae numquam atque.
Card 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas modi id consectetur, adipisci reprehenderit.
Dos and don’ts
Do make sure that you don’t hide cards in a Card Slider when they need to be visible initially.
Do use the Card Slider mainly for comparing similar content.