Html

This plugin provides an easy way to embed iframes, PDF files and Google Maps into Carousel slides.

Basic example

const options = {
  style: {
    "--f-carousel-slide-height": "400px",
    "--f-arrow-pos": "10px",
    "--f-arrow-bg": "#fff",
    "--f-arrow-color": "#777",
    "--f-arrow-width": "40px",
    "--f-arrow-height": "40px",
    "--f-arrow-shadow": "rgba(0, 0, 0, 0.3) 0px 1px 4px -1px",
    "--f-arrow-svg-stroke-width": "2.5px",
  },
  slides: [
    {
      src: "https://www.google.com/maps/search/?api=1&query=Westminster+Bridge%2C+London&query_place_id=ChIJoaH8k8YEdkgRnmDd5iuUl9Y",
    },
    {
      src: "/iframe.html",
    },
    {
      src: "/sample.pdf",
    },
  ],
};

Usage

Include corresponding JS and CSS files:

import { Html } from "@fancyapps/ui/dist/carousel/carousel.html.js";
import "@fancyapps/ui/dist/carousel/carousel.html.css";

Pass Html to Carousel constructor or use plugins option.

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

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

Options

iframeAttr

Attributes of an iframe element

Type

Record<string, string>

Default

{
    allow: "autoplay; fullscreen",
    scrolling: "auto",
    credentialless: "",
}