Fix mobile issue with quotationCarousel
This commit is contained in:
parent
83058dd429
commit
50d97c74ff
|
@ -6,7 +6,7 @@ import styles from "./QuotationCarousel.module.css";
|
|||
interface QuotationCarouselProps {
|
||||
data: string[];
|
||||
/** Width of the entire carousel including the buttons, in px. */
|
||||
width: number;
|
||||
width?: number;
|
||||
/** Minimum height of the carousel, in px. */
|
||||
height?: number;
|
||||
/** Diameter of the background circles, in px. Set to 0 for no circles. */
|
||||
|
@ -24,12 +24,13 @@ interface CarouselButtonProps {
|
|||
export function QuotationCarousel(props: QuotationCarouselProps) {
|
||||
const {
|
||||
data,
|
||||
width = 600,
|
||||
height = 100,
|
||||
circleDiameter = 120,
|
||||
minWidth = 600,
|
||||
className,
|
||||
} = props;
|
||||
const width = props.width < minWidth ? minWidth : props.width;
|
||||
const actualWidth = width < minWidth ? minWidth : width;
|
||||
const [activeIdx, setActiveIdx] = useState(0);
|
||||
|
||||
function showNextCard() {
|
||||
|
@ -45,7 +46,10 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
|
|||
className={
|
||||
className ? `${className} ${styles.carousel}` : styles.carousel
|
||||
}
|
||||
style={{ width: `${width / 16}rem`, minHeight: `${height / 16}rem` }}
|
||||
style={{
|
||||
width: `${actualWidth / 16}rem`,
|
||||
minHeight: `${height / 16}rem`,
|
||||
}}
|
||||
>
|
||||
<Circle className={styles.circle} diameter={circleDiameter} />
|
||||
<Circle
|
||||
|
|
Loading…
Reference in New Issue