73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import styles from './Banner.module.css'
|
|
import React from "react";
|
|
import { Carousel } from "antd";
|
|
import Button from '../Button/Button.tsx';
|
|
|
|
export interface SlideItem {
|
|
id: number;
|
|
image: string;
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
}
|
|
|
|
|
|
const slides: SlideItem[] = [
|
|
{
|
|
id: 1,
|
|
image: "/images/banner1.jpg",
|
|
title: "ПРОИЗВОДСТВО",
|
|
subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
|
|
description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
|
|
},
|
|
{
|
|
id: 2,
|
|
image: "/images/banner2.jpg",
|
|
title: "ПРОИЗВОДСТВО",
|
|
subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
|
|
description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
|
|
},
|
|
{
|
|
id: 3,
|
|
image: "/images/banner3.jpg",
|
|
title: "ПРОИЗВОДСТВО",
|
|
subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
|
|
description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
|
|
},
|
|
];
|
|
|
|
|
|
const BannerSlider: React.FC = () => {
|
|
|
|
const handleClick = () => {
|
|
console.log('Кнопка нажата!');
|
|
};
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Carousel autoplay dots className={styles.carousel}>
|
|
{slides.map((slide) => (
|
|
<div key={slide.id}>
|
|
<div className={styles.slide}>
|
|
<div className={styles.textBlock}>
|
|
<h2>{slide.title}</h2>
|
|
<h1>
|
|
{slide.subtitle}
|
|
<br /> {slide.description}
|
|
</h1>
|
|
<Button
|
|
label="СМОТРЕТЬ КАТАЛОГ"
|
|
onClick={handleClick}
|
|
/>
|
|
</div>
|
|
<img src={slide.image} alt="banner" className={styles.image} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export default BannerSlider; |