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.

Set different sizes based on breakpoints and Carousel will automatically pick up any changes in slide sizes when the viewport is resized.

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);
  }
}

Slide Gaps #

You can use margin-right CSS property (and margin-bottom for a vertical Carousel) to add space between slides. There is also a handy CSS variable to set the spacing regardless of the carousel direction:

.f-carousel {
  --f-carousel-spacing: 8px;
}

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.

This example creates 3 slides with 8px space between:

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

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

It is also possible to use CSS media queries to set spacing value depending on the viewport size. Carousel will automatically pick up any changes when the viewport is resized.

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 the thumbnails 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",
      },
    },
  },
};

You can also set the class name for the container at each breakpoint and then use that for the styling:

const options = {
  breakpoints: {
    "(min-width: 768px)": {
      classNames: {
        container: "f-carousel md",
      },
    },
    "(min-width: 1024px)": {
      classNames: {
        container: "f-carousel lg",
      },
    },
    "(min-width: 1280px)": {
      classNames: {
        container: "f-carousel xl",
      },
    },
  },
};