import React from 'react';
import Swiper from 'react-id-swiper';
import CustomButton from './CustomButton';
import CustomScrollbar from './CustomScrollbar';
const CustomizedComponent = () => {
const params = {
ContainerEl: 'section',
WrapperEl: 'section',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
renderPrevButton: () => <CustomButton className="swiper-button-prev">Prev</CustomButton>,
renderNextButton: () => <CustomButton className="swiper-button-next">Next</CustomButton>,
scrollbar: {
el: '.swiper-scrollbar',
hide: false,
},
renderSrollbar: () => <CustomScrollbar><hr/></CustomScrollbar>
}
return (
<Swiper {...params}>
<div>Slide #1</div>
<div>Slide #2</div>
<div>Slide #3</div>
<div>Slide #4</div>
<div>Slide #5</div>
</Swiper>
)
};
export default CustomizedComponent;