카페추천 웹사이트 (메인페이지 이미지 슬라이드 효과 넣기)

자동슬라이드를 넣긴했지만 이미지를 좀 잘라서 써야할 것 같다.

 

코드 공유

 

Header.module.css

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

a {

    text-decoration: none;

    color: black;

}

li {

    list-style: none;

}

img {

    display: block;

    width: 100%;

}

.header {

    text-align: center;

    margin-top: 40px;

}

.header > h1 > a{

    color: white;

}

.bgImg {

    display: flex;

    justify-content: center; /* 수평 중앙 정렬 */

    background-image: url('../img/main_bg.avif'); /* 배경 이미지 설정 */

    background-size: cover; /* 배경 이미지 크기 조정 */

    background-position: center; /* 배경 이미지 중앙 정렬 */

    height: 100vh; /* 원하는 높이 설정 */

    width: 100%; /* 전체 너비 */

    position: relative;

}

.contentWrap{

    position: relative; /* 자식 요소의 절대 위치 설정을 위해 필요 */

    overflow: hidden; /* 자식 요소가 넘어가는 부분 숨기기 */

    height: 780px; /* 슬라이드 높이 설정 */

    width: 1420px;

}

.contentImg {

    background-size: cover; /* 배경 이미지 크기 조정 */

    background-position: center; /* 배경 이미지 중앙 정렬 */

    width: 100%; /* 전체 너비 */

    height: 100%; /* 부모 요소에 맞게 높이 설정 */

    position: absolute; /* 절대 위치 */

    transition: opacity 1s ease-in-out; /* 부드러운 전환 효과 */

    opacity: 0;

}

.visible {

    opacity: 1; /* 보이는 상태 */

}

.hidden{

    opacity: 0; /* 숨겨진 상태 */

}

 

 

Header.js

import React, { useState, useEffect } from 'react';

import styles from './Header.module.css';

const images = [

    { id: 1, url: require('../img/main1.jfif') },

    { id: 2, url: require('../img/main2.jfif') },

    { id: 3, url: require('../img/main3.jfif') },

];

export default function Header() {

    const [currentIndex, setCurrentIndex] = useState(0);

    useEffect(() => {

        const interval = setInterval(() => {

            setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);

        }, 3000); // 3초마다 이미지 변경

        return () => clearInterval(interval); //컴포넌트 언마운트 시 인터벌 정리

    }, []);

   

    return (

        <div className={styles.bgImg}>

            <div className={styles.header}>

                <h1>

                    <a href="/">CAFE 추천</a>

                </h1>

                <div className={styles.contentWrap}>

                    {images.map((image, index) => (

                        <div

                            key={image.id}

                            className={`${styles.contentImg} ${currentIndex === index ? styles.visible : styles.hidden}`}

                            style={{ backgroundImage: `url(${image.url})` }}

                        >

                            <a href="#x" className="link"></a>

                        </div>

                    ))}

                </div>

            </div>

        </div>

    )

}

 

이미지 개판...

 

이미지 크기만 손보면 될것같다. 다른 이미지로 넣어서 -완-

 

 

얼추 메인은 마무리