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 display multiple fully visible slides in a carousel, you need to calculate the widths of the slides based on the amount of visible gaps.

For example, if you want 3 slides to be fully visible with 8px of gap between them, you will have 2 gaps visible (16px total), 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