Fancyapps

Arrows ​

This 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.

Examples ​

Basic example ​

1
2
3
4
5

Customized 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:

css
.f-carousel {
  --f-arrow-pos: 10px;

  --f-arrow-width: 38px;
  --f-arrow-height: 38px;

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

  --f-arrow-color: #475569;
  --f-arrow-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0
          0 / 30%);

  --f-arrow-border-radius: 50%;
  --f-arrow-bg: #fff;
  --f-arrow-hover-bg: #f9f9f9;
  --f-arrow-active-bg: #f0f0f0;
}
1
2
3
4
5

You can also specify styles for each Carousel individually using the style option:

js
const options = {
  style: {
    "--f-arrow-pos": "10px",
  },
};

Customized icons ​

js
const options = {
  Arrows: {
    prevTpl: "⟵",
    nextTpl: "⟶",
  },
};
1
2
3
4
5

Usage ​

Include corresponding JS and CSS files:

js
import { Arrows } from "@fancyapps/ui/dist/carousel/carousel.arrows.js";
import "@fancyapps/ui/dist/carousel/carousel.arrows.css";

Pass Arrows to Carousel constructor or use plugins option.

js
const container = document.getElementById("myCarousel");
const options = {
  // Your custom options
};

Carousel(container, options, { Arrows }).init();

Options ​

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"></path></svg>'

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"></path></svg>'