WidgetSwiperPhotoSlider

Source code

https://

More ideas and inspiration

Embark on a design journey that surpasses pixels, entering a realm of imagination.

Usage

Import photoswipe styles into root layout (Page Layout.astro components)

---
import "photoswipe/style.css";
---

Add to astro config file

import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ['photoswipe'],
    }
  }
})

---
import { WidgetSwiperPhotoSlider } from '@yatoday/astro-ui/astro';
---

<!-- All images in the directory /src/assets/images/folder_01 will be added to the gallery -->
<WidgetSwiperPhotoSlider imagesFolder="folder_01" />

Props

Prop	Type	Default	Description
`imagesFolder`	`string`	-	Path to the folder with images relative to /src/assets/images/`{imagesFolder}`
`id`	`string`	js random	By default, the `id` is generated automatically. If you decide to specify this parameter yourself, make sure that it is unique on the page
`title`	`string`	-	`Title` prop in Headline component
`subtitle`	`string`	-	`Subtitle` prop in Headline component
`tagline`	`string`	-	`Tagline` prop in Headline component
`isAfterContent`	`boolean`	`false`	-
`isDark`	`boolean`	`false`	Adds the `dark` CSS class to the WidgetWrapper
`bg`	`string`	-	Set background element
`isAfterContent`	`boolean`	`false`	-
`withNavigation`	`boolean`	`true`	Navigation visibility
`classes.container`	`string`	-	CSS classes for the WidgetWrapper container
`classes.loading`	`string`	-	CSS classes for loading layout
`classes.headline.{...}`	`string`	-	CSS classes for the Headline component
`autoplay`	`boolean`	`false`	`Object` with autoplay parameters or `boolean` true to enable with default settings
`...rest`	`any`	-	…rest params from Swiper js parameters