test
This commit is contained in:
@@ -24,10 +24,12 @@ export const HomeBannerList = () => {
|
||||
|
||||
}).finally(() => {
|
||||
let items = [
|
||||
{title: '배너 이미지1', imageUrl: IMAGE_ROOT + '/sample_banner_0.png', linkUrl: '', order: ''},
|
||||
{title: '배너 이미지2', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'link2', order: ''},
|
||||
{title: '배너 이미지3', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: '', order: ''},
|
||||
{title: '배너 이미지1', imageUrl: IMAGE_ROOT + '/sample_banner_0.png', linkUrl: 'http://www.google.com', order: 3},
|
||||
{title: '배너 이미지2', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'http://www.naver.com', order: 1},
|
||||
{title: '배너 이미지3', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'http://www.daum.net', order: 2},
|
||||
];
|
||||
// sort 추가 한다
|
||||
items.sort((a, b) => a.order - b.order);
|
||||
setBannerList(items);
|
||||
});
|
||||
};
|
||||
@@ -38,7 +40,7 @@ export const HomeBannerList = () => {
|
||||
|
||||
const onClickToMove = (linkUrl?: string) => {
|
||||
if(!!linkUrl){
|
||||
alert('open :: ' + linkUrl);
|
||||
window.open(linkUrl);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -50,35 +52,37 @@ export const HomeBannerList = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="swiper-banner">
|
||||
<div className="banner-wrapper">
|
||||
<Swiper
|
||||
modules={[Pagination, Autoplay]}
|
||||
slidesPerView={1}
|
||||
pagination={ swiperPagination }
|
||||
>
|
||||
{
|
||||
bannerList.map((value, index) => (
|
||||
<SwiperSlide
|
||||
key={ `banner-swiper-key-${index}` }
|
||||
>
|
||||
<img
|
||||
src={ value.imageUrl }
|
||||
alt={ value.title }
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}
|
||||
onClick={ () => onClickToMove(value.linkUrl) }
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
</div>
|
||||
<div className="banner-pagination"></div>
|
||||
</div>
|
||||
{ bannerList && bannerList.length > 0 &&
|
||||
<div className="swiper-banner">
|
||||
<div className="banner-wrapper">
|
||||
<Swiper
|
||||
modules={[Pagination, Autoplay]}
|
||||
slidesPerView={1}
|
||||
pagination={ swiperPagination }
|
||||
>
|
||||
{
|
||||
bannerList.map((value, index) => (
|
||||
<SwiperSlide
|
||||
key={ `banner-swiper-key-${index}` }
|
||||
>
|
||||
<img
|
||||
src={ value.imageUrl }
|
||||
alt={ value.title }
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}
|
||||
onClick={ () => onClickToMove(value.linkUrl) }
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
</div>
|
||||
<div className="banner-pagination"></div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user