Navigation #

This built-in plugin creates navigation elements (next/prev arrows) and automatically toggles the state of the elements based on the number of pages and whether infinite navigation is enabled.

Usage #

This is a built-in plugin and no additional files need to be loaded.

const container = document.getElementById("myCarousel");
const options = {
  Navigation: {
    nextTpl: "Next page",
    prevTpl: "Previous page",
  },
};

new Carousel(container, options);

Example how to disable this plugin:

const options = {
  Navigation: false,
};

Style #

This plugins uses minimal styling by default to make it easier to customize the design. Provided CSS variables make it easy to customize, example:

.f-carousel {
  --f-button-width: 38px;
  --f-button-height: 38px;

  --f-button-svg-width: 16px;
  --f-button-svg-height: 16px;
  --f-button-svg-stroke-width: 2.5;

  --f-button-color: rgb(71 85 105);
  --f-button-border-radius: 50%;
  --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0
          0 / 30%);

  --f-button-bg: #fff;
  --f-button-hover-bg: #f9f9f9;
  --f-button-active-bg: #f0f0f0;
}

Options #

classes #

Class names for DOM elements

Type

Record<string, string>

Default

{
    container: "f-carousel__nav",
    button: "f-button",
    isNext: "is-next",
    isPrev: "is-prev",
}

nextTpl #

HTML template for right arrow

Type

string

Default

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"/></svg>

prevTpl #

HTML template for left arrow

Type

string

Default

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"/></svg>