diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx index 070339bc..8c9ce2e3 100644 --- a/src/components/node/NodeImageTinySlider/index.tsx +++ b/src/components/node/NodeImageTinySlider/index.tsx @@ -6,20 +6,20 @@ import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import TinySlider from 'tiny-slider-react'; import styles from './styles.module.scss'; +import { TinySliderSettings } from 'tiny-slider'; -const settings = { +const settings: TinySliderSettings & { center: boolean } = { nav: false, - buttons: false, mouseDrag: true, gutter: 10, center: true, lazyload: true, items: 1, edgePadding: 150, - loop: true, + loop: false, arrowKeys: false, - prevButton: false, - nextButton: false, + // prevButton: false, + // nextButton: false, swipeAngle: 45, }; @@ -31,7 +31,9 @@ const NodeImageTinySlider: FC = ({ node }) => {
{images.map(image => ( - +
+ +
))}
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss index 98fe700e..980681f2 100644 --- a/src/components/node/NodeImageTinySlider/styles.module.scss +++ b/src/components/node/NodeImageTinySlider/styles.module.scss @@ -1,5 +1,20 @@ .slider { - img { - max-height: calc(100vh - 140px); + padding-bottom: 15px; + + :global(.tns-controls) { + display: none; + } +} + +.slide { + align-items: center; + display: flex; + justify-content: center; + text-align: center; + + img { + max-height: calc(100vh - 150px); + max-width: 100%; + border-radius: $radius; } }