/**
* WordPress dependencies
*/
import { useBlockProps, RichText } from "@wordpress/block-editor";
import { omit } from "lodash";
import {
sanitizeURL,
BlockProps,
sanitizeIconValue
} from "@essential-blocks/controls";
import attributes from "./attributes";
const deprecated = [
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag,
version,
showLightbox,
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass =
sliderType === "content"
? "eb-slider-type-content"
: "eb-slider-type-image";
return (
<BlockProps.Save attributes={attributes}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-blockid={blockId}
data-version={version}
data-settings={btoa(JSON.stringify(settings))}
data-arrowNextIcon={sanitizeIconValue(arrowNextIcon)}
data-arrowPrevIcon={sanitizeIconValue(arrowPrevIcon)}
data-lightbox={version === "v2" ? showLightbox : false}
>
<div className={`eb-slider-init ${sliderTypeClass}`}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
data-src={image.url}
>
{image.buttonUrl && image.isValidUrl ? (
<div>
<a
href={sanitizeURL(image.buttonUrl)}
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<img
className="eb-slider-image"
data-lazy={image.url}
/>
</a>
</div>
) : (
<div>
<img
className="eb-slider-image"
data-lazy={image.url}
/>
</div>
)}
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={titleTag}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={contentTag}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(
image.buttonUrl,
)
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(
image.secondButtonUrl,
)
: ""
}
className="eb-slider-second-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</BlockProps.Save>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag,
version,
showLightbox
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<BlockProps.Save attributes={attributes}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-blockid={blockId}
data-version={version}
data-settings={btoa(JSON.stringify(settings))}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-lightbox={version === 'v2' ? showLightbox : false}
>
<div className={`eb-slider-init ${sliderTypeClass}`}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
data-src={image.url}
>
{image.buttonUrl && image.isValidUrl ?
<div><a
href={sanitizeURL(image.buttonUrl)}
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener">
<img
className="eb-slider-image"
src={image.url}
/>
</a></div>
: <div><img
className="eb-slider-image"
src={image.url}
/></div>
}
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={titleTag}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={contentTag}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: ""
}
className="eb-slider-second-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</BlockProps.Save >
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag,
version,
showLightbox
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<BlockProps.Save attributes={attributes}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
{
blockId && (
<script dangerouslySetInnerHTML={{
__html:
`var ${blockId.replaceAll('-', '_')} = ${JSON.stringify(settings)};`
}}></script>
)
}
<div
className={`eb-slider-wrapper ${blockId}`}
data-blockid={blockId}
data-version={version}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-lightbox={version === 'v2' ? showLightbox : false}
>
<div className={`eb-slider-init ${sliderTypeClass}`}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
data-src={image.url}
>
{image.buttonUrl && image.isValidUrl ?
<div><a
href={sanitizeURL(image.buttonUrl)}
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener">
<img
className="eb-slider-image"
src={image.url}
/>
</a></div>
: <div><img
className="eb-slider-image"
src={image.url}
/></div>
}
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={titleTag}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={contentTag}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: ""
}
className="eb-slider-second-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</BlockProps.Save>
);
}
},
{
attributes: omit({ ...attributes }, ["version"]),
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag,
version
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<BlockProps.Save attributes={attributes}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
{
blockId && (
<script dangerouslySetInnerHTML={{
__html:
`var ${blockId.replaceAll('-', '_')} = ${JSON.stringify(settings)};`
}}></script>
)
}
<div
className={`eb-slider-wrapper ${blockId}`}
data-blockid={blockId}
data-version={version}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
>
<div className={`eb-slider-init ${sliderTypeClass}`}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
{image.buttonUrl && image.isValidUrl ?
<div><a
href={sanitizeURL(image.buttonUrl)}
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener">
<img
className="eb-slider-image"
src={image.url}
/>
</a></div>
: <div><img
className="eb-slider-image"
src={image.url}
/></div>
}
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={titleTag}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={contentTag}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: ""
}
className="eb-slider-second-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</BlockProps.Save>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag,
version
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<BlockProps.Save attributes={attributes}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
{
blockId && (
<script dangerouslySetInnerHTML={{
__html:
`var ${blockId.replaceAll('-', '_')} = ${JSON.stringify(settings)};`
}}></script>
)
}
<div
className={`eb-slider-wrapper ${blockId}`}
data-blockid={blockId}
data-version={version}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
>
<div className={`eb-slider-init ${sliderTypeClass}`}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
{image.buttonUrl && image.isValidUrl ?
<div><a
href={sanitizeURL(image.buttonUrl)}
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener">
<img
className="eb-slider-image"
src={image.url}
/>
</a></div>
: <div><img
className="eb-slider-image"
src={image.url}
/></div>
}
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={titleTag}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={contentTag}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: ""
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</BlockProps.Save>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag,
version
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<BlockProps.Save attributes={attributes}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
{
blockId && (
<script dangerouslySetInnerHTML={{
__html:
`var ${blockId.replaceAll('-', '_')} = ${JSON.stringify(settings)};`
}}></script>
)
}
<div
className={`eb-slider-wrapper ${blockId}`}
data-blockid={blockId}
data-version={version}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
>
<div className={`eb-slider-init ${sliderTypeClass}`}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={titleTag}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={contentTag}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: ""
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</BlockProps.Save>
);
}
},
{
attributes: omit({ ...attributes }, ["version"]),
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-titleTag={titleTag}
data-contentTag={contentTag}
>
<div className={sliderTypeClass}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? image.buttonUrl
: ""
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? image.secondButtonUrl
: ""
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-titleTag={titleTag}
data-contentTag={contentTag}
>
<div className={sliderTypeClass}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: "#"
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-titleTag={titleTag}
data-contentTag={contentTag}
>
<div className={sliderTypeClass}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? image.buttonUrl
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? image.secondButtonUrl
: "#"
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
const sliderTypeClass = sliderType === 'content' ? 'eb-slider-type-content' : 'eb-slider-type-image';
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-titleTag={titleTag}
data-contentTag={contentTag}
>
<div className={sliderTypeClass}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? image.buttonUrl
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? image.secondButtonUrl
: "#"
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
titleTag,
contentTag
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
data-titleTag={titleTag}
data-contentTag={contentTag}
>
<div className={sliderType}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: "#"
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}
},
{
attributes: omit({ ...attributes }, ["titleTag", "contentTag"]),
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
arrowNextIcon,
arrowPrevIcon,
dotPreset,
isRTLEnable,
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
currentSlide: 0,
rtl: isRTLEnable,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
data-arrowNextIcon={arrowNextIcon}
data-arrowPrevIcon={arrowPrevIcon}
>
<div className={sliderType}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={image.subtitle}
/>
)}
<div className="eb-slider-button-wrapper">
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
{image.showSecondButton &&
image.secondButtonText &&
image.secondButtonText.length >
0 && (
<a
href={
image.secondButtonUrl &&
image.isValidUrl
? sanitizeURL(image.secondButtonUrl)
: "#"
}
className="eb-slider-button"
target={
image.secondButtonOpenNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.secondButtonText
}
/>
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}
},
{
attributes: omit({ ...attributes }, ["isRTLEnable"]),
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
dotPreset,
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
vertical,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId} ${dotPreset}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
>
<div className={sliderType}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length >
0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={
image.subtitle
}
/>
)}
{image.showButton &&
image.buttonText &&
image.buttonText.length >
0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
},
},
{
attributes: omit({ ...attributes }, ["dotPreset"]),
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
initialSlide,
vertical,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
>
<div className={sliderType}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length >
0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={
image.subtitle
}
/>
)}
{image.showButton &&
image.buttonText &&
image.buttonText.length >
0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
},
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
classHook,
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
initialSlide,
vertical,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow:
attributes.TABslideToShowRange ||
attributes.slideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow:
attributes.MOBslideToShowRange ||
attributes.slideToShowRange,
},
},
],
};
return (
<div {...useBlockProps.save()}>
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
>
<div className={sliderType}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<RichText.Content
tagName={"h2"}
className="eb-slider-title"
value={image.title}
/>
)}
{image.subtitle &&
image.subtitle.length >
0 && (
<RichText.Content
tagName={"p"}
className="eb-slider-subtitle"
value={
image.subtitle
}
/>
)}
{image.showButton &&
image.buttonText &&
image.buttonText.length >
0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
<RichText.Content
value={
image.buttonText
}
/>
</a>
)}
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
},
},
{
attributes: { ...attributes },
supports: {
align: ["wide", "full"],
},
save: ({ attributes }) => {
const {
blockId,
sliderType,
sliderContentType,
images,
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
vertical,
pauseOnHover,
speed,
initialSlide,
textAlign,
} = attributes;
//Slider Settings
const settings = {
arrows,
adaptiveHeight,
autoplay,
autoplaySpeed,
dots,
fade,
infinite,
pauseOnHover,
slidesToShow: attributes.slideToShowRange,
speed,
initialSlide,
vertical,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: attributes.TABslideToShowRange,
},
},
{
breakpoint: 767,
settings: {
slidesToShow: attributes.MOBslideToShowRange,
},
},
],
};
return (
<div {...useBlockProps.save()}>
<div
className={`eb-slider-wrapper ${blockId}`}
data-settings={JSON.stringify(settings)}
data-images={JSON.stringify(images)}
data-sliderContentType={sliderContentType}
data-sliderType={sliderType}
data-textAlign={textAlign}
>
<div className={sliderType}>
{images.map((image, index) => (
<div
className={`eb-slider-item ${sliderContentType}`}
key={index}
>
<img
className="eb-slider-image"
src={image.url}
/>
{sliderType === "content" && (
<div
className={`eb-slider-content align-${textAlign}`}
>
{image.title &&
image.title.length > 0 && (
<h2 className="eb-slider-title">
{image.title}
</h2>
)}
{image.subtitle &&
image.subtitle.length > 0 && (
<p className="eb-slider-subtitle">
{image.subtitle}
</p>
)}
{image.showButton &&
image.buttonText &&
image.buttonText.length > 0 && (
<a
href={
image.buttonUrl &&
image.isValidUrl
? sanitizeURL(image.buttonUrl)
: "#"
}
className="eb-slider-button"
target={
image.openNewTab
? "_blank"
: "_self"
}
rel="noopener"
>
{image.buttonText}
</a>
)}
</div>
)}
</div>
))}
</div>
</div>
</div>
);
},
},
];
export default deprecated;