Slider Component
The Slider component uses the React Slick library for creating a slider.
Slider.js
const Slidercmp = () => {
const settings = {
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: <CustomNextArrow />,
prevArrow: <CustomPrevArrow />,
};
return (
<Slider {...settings}>
<div>
<img src="./images/banner/ROG-Zephyrus-banner-2.jpg" alt="Banner 1" />
</div>
<div>
<img src="./images/banner/wide-range-of-laptops.jpg" alt="Banner 2" />
</div>
<div>
<img
src="./images/banner/MSI-AMG-Stealth16-banner2.jpg"
alt="Banner 3"
/>
</div>
<div>
<img src="./images/banner/g5-gaming-banner2.jpg" alt="Banner 4" />
</div>
</Slider>
);
};The Slidercmp component is configured with various options:
- infinite : Enables infinite loop for the slider.
- speed : Sets the slide transition speed.
- slidesToShow : Determines the number of slides visible at once (1 in this case).
- slidesToScroll : Sets the number of slides to scroll at a time (1 in this case).
- nextArrow and prevArrow : Customizes the navigation arrows.
Custom Arrows
CustomNextArrow and CustomPrevArrow components are used to customize the navigation arrows.
Slider.js
const CustomNextArrow = (props) => (
<div
className={props.className}
style={{
...props.style,
display: "block",
width: "50px",
height: "50px",
zIndex: 2,
}}
onClick={props.onClick}
>
Next
</div>
);
const CustomPrevArrow = (props) => (
<div
className={props.className}
style={{
...props.style,
display: "block",
width: "50px",
height: "50px",
zIndex: 2,
left: 0,
}}
onClick={props.onClick}
>
Prev
</div>
);