Carousel Samples - InkJS

Intro and basic concepts

Ink.UI.Carousel is a generic component for showing partial content, given that you have a way to "advance" and reveal the rest of your content. You can use this for a slideshow, showing one slide at a time, or for some kind of gallery or link collection, by showing more than one slide at a time.

There are two important elements involved: the stage element, which contains slides and is important because of slide sizing, and the slides, which are direct children of the stage. Slides are organized into pages. When the carousel changes pages, this is unrelated to the slides inside.

---

Controlling how many slides exist on a single page

The size of the slides affects the slide count per page. By setting the size of the slides to 100% of the width (or height, if it's a vertical carousel), you get one slide per page. By setting your slides to 50% of the width, you get 2 slides per page, and so on.

Just use Ink's large-*, medium-*, small-* in each of your slides to make your carousel responsive. A slideshow in mobile, and a gallery in desktop and tablet.

Setting width to 100% in all slides:

Setting width to less than 100% in all slides:

---

Using percentage widths

---

Vertical Carousels (experimental)

When using a vertical carousel, it's important to set a width in your container. This is because of how block level elements behave.

---

Change pages through Javascript, or BYOB (Bring Your Own Buttons)

You can use the setPage(), nextPage() and previousPage() methods to change pages, as seen in the below example:

The wrap argument is used to make the pages "wrap around" both ends. If you are on the first page, and call previousPage(), this takes you to the last page.

Wrap previousPage() nextPage() setPage( 1 2 3 4 )

---

Auto-advance

This is the Carousel that shouldn't really be used on the web, but is unfortunately everywhere, so we need to have one.

Use the autoAdvance option to set how many milliseconds pass before advancing a page.

---