메인페이지는 한 눈에 보기 쉽고, 딱! 커다랗게! 만들어서, 원하는 기능을 모두 담았으면 좋겠다고 생각했습니다.
그래서, 평소에 예쁘다고 생각했던, 뱅글뱅글 돌아가는 Cube 형태의 슬라이더를 사용해보았습니다.
Swiper
: https://swiperjs.com/react#usage
Swiper React Components
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
정말 따라쓰기 편하게, 설명이 너무 잘 되어있어서 최고! 추천추천!
import { Swiper, SwiperSlide } from "swiper/react";
import styles from "./homepage-slide.module.css";
import Image from "next/image";
import Link from "next/link";
import "swiper/css";
import "swiper/css/effect-cube";
import "swiper/css/pagination";
import { EffectCube, Pagination } from "swiper";
function HompageSlider() {
return (
<div className={styles.maindiv}>
<h1> WHAT are U eating today?</h1>
<Swiper
className={styles.slider}
effect={"cube"}
grabCursor={true}
cubeEffect={{
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
}}
pagination={true}
modules={[EffectCube, Pagination]}
>
<SwiperSlide>
<Link href={"/allfoods"}>
<Image
src={
"/image/homepage-slider/brooke-lark-wMzx2nBdeng-unsplash-fix.jpg"
}
width={2000}
height={1500}
alt={"allfoods"}
priority
/>
</Link>
</SwiperSlide>
....
export default HompageSlider;
대단히 길어보이지만 사실, Swiper 에서, 옵션을 가져오고
next/image를 import 하여, Image 를 통해, 이미지 가져오고,
next/Link 를 import 하여, Link 를 걸어준 것이 다다!
이제 이 HomepageSlider 컴포넌트를, Pages 폴더로 로 가서, 붙여준다.
import HompageSlider from "../components/homepage-components/homepage-slide";
import Head from "next/head";
export default function Home() {
return (
<div>
<Head>
<title> Homepage </title>
<meta
name="description"
content="this is the main page, include all of function in page"
/>
</Head>
<HompageSlider />
</div>
);
}
간단하다. 메인 페이지 끝!
'메인-프로젝트 > Next.js - 오늘 뭐먹지? 프로젝트' 카테고리의 다른 글
| 0. 내가 React, Nextjs 를 선택한 이유 (0) | 2022.12.02 |
|---|---|
| 5. DB 연결 with. MongoDB Atlas 그리고 API (0) | 2022.12.02 |
| 4. 로그인, 회원가입 페이지 생성 (0) | 2022.12.02 |
| 3. Layout 구성하기 (0) | 2022.12.02 |
| 1. project 를 해석해 봅시다. (0) | 2022.12.02 |
댓글