Responsive Design

Slides Per Page

The number of visible slides in a carousel is controlled using slide sizes with CSS. Slide size refer to width for a horizontal carousel and height for a vertical.

Carousel supports any slide size out of the box. It is also possible to set a different size for each slide individually.

Here's a simple example that shows one slide per page on small screen devices and three on a larger screen:

.f-carousel-slide {
  width: 100%;
}

@media (min-width: 768px) {
  .f-carousel-slide {
    width: calc(100% / 3);
  }
}

You can also use CSS variable to achieve the same result:

.f-carousel {
  --f-carousel-slide-width: 100%;
}

@media (min-width: 768px) {
  .f-carousel {
    --f-carousel-slide-width: calc(100% / 3);
  }
}

1

2

3

4

5

6

7

8

9

Slide Gaps

Use CSS variable --f-carousel-gap to set the gap between slides:

.f-carousel {
  --f-carousel-gap: 16px;
}

If you want to show only fully visible slides in the carousel, you need to adjust the slide widths after setting the spacing. The calculations are very simple. For example, if you want 8px spacing between slides and for 3 slides to be fully visible, you will have 2 spaces visible (8px each), and each slide will be (100% - 16px) / 3 wide:

.f-carousel {
  --f-carousel-gap: 8px;
  --f-carousel-slide-width: calc((100% - 16px) / 3);
}

1

2

3

4

5

6

7

8

9

The main advantage of this approach is that you can have slides of any width and have full control over slide dimensions (including padding).

Breakpoints

You can make a lot of adjustments with CSS based on the width of the viewport, but sometimes you may need more customization.

For example, you may want to completely change the behavior of the Carousel on small screen devices. You can choose to change the direction of the carousel, disable a plugin, or disable the Carousel entirely. This can be achieved using the breakpoints option.

Example of a Carousel that is only enabled when the screen width is less than 768px:

const options = {
  enabled: true,
  breakpoints: {
    "(min-width: 768px)": {
      enabled: false,
    },
  },
};

Disable thumbnails on small screen devices:

const options = {
  Thumbs: false,
  breakpoints: {
    "(min-width: 768px)": {
      Thumbs: {
        type: "modern",
      },
    },
  },
};

Combine style and breakpoints options to quickly change the number of slides displayed depending on the screen size by setting CSS variables:

const options = {
  style: {
    "--f-carousel-slide-gap": "8px",
    "--f-carousel-slide-width": "100%",
  },
  breakpoints: {
    "(min-width: 768px)": {
      style: {
        "--f-carousel-slide-width": "calc((100% - 16px) / 3)",
      },
    },
  },
};

1

2

3

4

5

6

7

8

9