-
- {image ? (
-
{image}
- ) : (
-
- )}
- {show_image_title && (
-
-
- {full_width ? (
-
- {item.title}{' '}
-
-
- ) : (
- <>
- {item.title}{' '}
-
-
- )}
-
-
- )}
+
+
-
+
);
};
@@ -235,13 +78,28 @@ const SliderTemplate = ({
show_dots = true,
autoplay = false,
autoplay_speed = 2, //seconds
+ slide_appearance = 'default',
reactSlick,
+ block,
+ ...otherProps
}) => {
+ const block_id = block;
const intl = useIntl();
+
const [userAutoplay, setUserAutoplay] = useState(autoplay);
- const nSlidesToShow = parseInt(slidesToShow);
+ const nSlidesToShow =
+ items.length < parseInt(slidesToShow)
+ ? items.length
+ : parseInt(slidesToShow);
const Slider = reactSlick.default;
- const { slider, focusNext } = useSlider(userAutoplay);
+ const {
+ slider,
+ focusSlide,
+ SliderNextArrow,
+ SliderPrevArrow,
+ handleSlideKeydown,
+ } = useSlider(userAutoplay, setUserAutoplay, block_id);
+
const toggleAutoplay = () => {
if (!slider?.current) return;
if (userAutoplay) {
@@ -313,11 +171,11 @@ const SliderTemplate = ({
focusOnSelect: false,
draggable: true,
accessibility: true,
- nextArrow:
,
- prevArrow:
,
+ nextArrow:
,
+ prevArrow:
,
appendDots: renderCustomDots,
// Custom handling of focus for a11y
- afterChange: focusNext,
+ afterChange: focusSlide,
responsive: [
{
breakpoint: 980,
@@ -333,7 +191,9 @@ const SliderTemplate = ({
{title && (
@@ -349,30 +209,11 @@ const SliderTemplate = ({
'full-width': full_width,
})}
>
-
+
{items?.length > nSlidesToShow && (
-
-
-
+
+ {userAutoplay ? 'pause' : 'play'}
+
)}
@@ -383,6 +224,8 @@ const SliderTemplate = ({
sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
critical: true,
});
+ const nextIndex = index < items.length - 1 ? index + 1 : null;
+ const prevIndex = index > 0 ? index - 1 : null;
return (
);
})}
-
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
index 253f8bd99..0e9e6e0b2 100644
--- a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
+++ b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
@@ -7,10 +7,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { useIntl, defineMessages } from 'react-intl';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Button, Container } from 'design-react-kit';
+
+import {
+ Icon,
+ CarouselWrapper,
+ NextArrow,
+ PrevArrow,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Container } from 'design-react-kit';
import { UniversalLink } from '@plone/volto/components';
/**
@@ -19,49 +23,7 @@ import { UniversalLink } from '@plone/volto/components';
* @extends Component
*/
-const messages = defineMessages({
- videogallery_next_arrow: {
- id: 'videogallery_next_arrow',
- defaultMessage: 'Prossimo video',
- },
- videogallery_prev_arrow: {
- id: 'videogallery_prev_arrow',
- defaultMessage: 'Video precedente',
- },
-});
-
const Body = ({ data, children, nItems = 0, reactSlick }) => {
- const intl = useIntl();
-
- const NextArrow = (props) => {
- const { onClick, className } = props;
- return (
-
- );
- };
- const PrevArrow = (props) => {
- const { onClick, className } = props;
- return (
-
- );
- };
-
const Slider = reactSlick.default;
const settings = {
@@ -127,9 +89,9 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
)}