#fe #html #css Photos should automatically slide and move when refreshing or accessing the page, but they are not

anonymous
July 13, 2024
170 views
1 vote
2 Answers

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>웹사이트 만들기</title>

    <link rel="stylesheet" href="web.css?after" />
  </head>
  <body>
    <div id="layout">
      <header>
        <!-- 로고 -->
        <div id="logo">
          <img src="/0712 웹사이트/images/logo.jpg" alt="로고" />
        </div>
        <!-- 네비게이션 메뉴 (메인 메뉴 및 서브 메뉴) -->
        <ul>
          <li>
            <a href="#" class="main-menu">펜션소개</a>
          </li>
          <li>
            <a href="#" class="main-menu">룸 미리보기</a>
            <nav class="sub-menu">
              <li>사랑 하나<span>(최대2인)</span></li>
              <li>설렘 둘<span>(최대 4인)</span></li>
              <li>아침 한스푼<span>(최대2인)</span></li>
              <li>고요 두스푼<span>(최대4인)</span></li>
            </nav>
          </li>
          <li class="community">
            <a href="#" class="main-menu">커뮤니티</a>
            <nav class="sub-menu">
              <li>예약하기</li>
              <li>문의하기</li>
              <li>갤러리</li>
            </nav>
          </li>
        </ul>
      </header>

      <!-- 메인 헤딩 -->
      <h1 id="center-text">
        당신을 위한 힐링타임<br />아침고요펜션과 함께 하세요.
      </h1>
      <!-- 슬라이드 이미지 -->

      <section id="slide">
        <div id="imgs">
          <img src="images/slide-1.jpg" alt="슬라이드1" />
          <img src="images/slide-2.jpg" alt="슬라이드2" />
          <img src="images/slide-3.jpg" alt="슬라이드3" />
        </div>
      </section>

      <main>
        <section id="notice">
          <!-- 공지사항 목록 -->
          <h2>공지사항</h2>
          <a href="#"
            >-진짜 아기랑 남편이랑 잘 쉬다 왓어요!!<span>2018-03-25</span></a
          >
          <a href="#">-엄청 만족합니다.<span>2018-02-13</span></a>
          <a href="#">-감사합니다.<span>2017-12-09</span></a>
          <a href="#">-잘 쉬고 왔습니다.<span>2017-08-19</span></a>
          <a href="#">-3일간 머물고 왔습니다.<span>2017-05-26</span></a>
          <a href="#">-가을에 한번 더 가려고 합니다.<span>2017-03-07</span></a>
        </section>

        <section id="partner">
          <div>
            <img
              src="/0712 웹사이트/images/partner.jpg"
              alt="협력사"
              id="partners_logo"
            />
            <button id="close">닫기</button>
          </div>
          <p>사계절 바베큐장<br />쿡TV & 와이파이</p>
          <p>-남이섬 집 라인</p>
          <p>-쁘띠 프랑스</p>
          <p>-자라섬 재즈페스티벌</p>
          <p>-가평 사계절 썰매장</p>
          <!-- 협력사 콘텐츠 -->
        </section>

        <section id="banner">
          <!-- 아이콘형 배너 버튼들 -->
          <div>
            <img src="images/icon_01.png" alt="펜션 알림판" />
            <img src="images/icon_02.png" alt="펜션 행사일정" />
            <img src="images/icon_03.png" alt="사용자 이용규칙" />
          </div>
        </section>
      </main>

      <footer>
        <div id="rules">
          <a href="#">법적고지</a>
          <a href="#">개인정보보호방침</a>
          <a href="#">개인정보처리방침</a>
        </div>
        <div id="info">
          <p>입금: 농협 302-1051-7449-71 최주희</p>
          <p>문의전화 : <a href="tel:010-0000-0000">010-8949-1927</a></p>
          <p>이메일 : <a href="email">[email protected]</a></p>
          <p>주소 : 경기 가평군 상면 수목원로 380</p>
        </div>
        <div id="brand">
          <p>상호명: 주식회사 비즈온네트웍스</p>
          <p>사업자등록번호: 244-87-00033</p>
          <p>대표자: 이희민</p>
          <p>사이트제작: 비즈온네트웍스</p>
        </div>
        <!-- 푸터 정보 (링크, 연락처 등) -->
      </footer>
    </div>
  </body>
</html>

/* 전역 스타일 및 리셋 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 레이아웃 구조 */
#layout {
  max-width: 1200px;
  margin: auto;
  height: 80vh;
}

/* 헤더 스타일 */
header {
  display: flex;
}
img {
  display: block;
}
/* 로고 스타일 */

header #logo {
  top: 0;
  left: 0;
  display: block;
}
header ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
header ul li {
  flex-direction: column;
  position: relative;
  margin: auto;
  list-style-type: none;
}
/* 메인 메뉴 스타일 */
ul li .main-menu {
  /* position: relative; */
  text-decoration: none;
  color: powderblue;
  font-size: 1.5rem;
  display: block;
  height: 40px;
}

/* 서브 메뉴 스타일 */
.sub-menu {
  cursor: pointer;
  text-align: center;
  top: 100%;
  left: 0;
  width: 100%;
  position: absolute;
  height: 0;
  transition: 1.5s;
  overflow: hidden;
}

/* 메뉴 호버 효과 */
.main-menu:hover {
  animation: main-menu-hover 3s both ease;
  border-radius: 10%;
}

@keyframes main-menu-hover {
  0% {
    background-color: green;
  }
  50% {
    background-color: gray;
  }
  100% {
    background-color: green;
  }
}
header li:hover .sub-menu {
  height: 200px;
  background-color: azure;
  line-height: 1.8;
  border-radius: 20%;
}
.sub-menu li:hover {
  animation: menu-to-scale 0.5s both ease;
}
@keyframes menu-to-scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
header li.community:hover .sub-menu {
  height: 80px;
}
.sub-menu li:hover {
  background-color: bisque;
  transition: 0.5s;
}
.sub-menu li {
  border-radius: 20%;
}
/* 메인 슬라이드 섹션 스타일 */

#imgs {
  display: flex;
  height: 40vh;
  border: 3px solid red;
  overflow: hidden;
  animation: slide_img 10s linear alternate-reverse infinite ease;
  width: 100%;
  position: absolute;
  /* flex-direction: column; */
}
@keyframes slide_img {
  0%,
  100% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
}

#slide > #img {
  flex: 1;
}

Hello!
Please help me.
Even though the 3 images in the middle implemented the animation, it does not work.
I’m a student who just started studying for development.
It’s the same even if you look at ai or the page you’re referring to, but it doesn’t work.
I know you’re busy, but please help!
Photos should automatically slide and move when refreshing or accessing the page, but they are not.

Tags: html

Answers

There were too many paramteres in this:
animation: slide_img 10s linear alternate-reverse infinite ease;. The animation-timing-function can’t be linear and ease at the same time.

So, I took out the linear, like so:

/* 전역 스타일 및 리셋 */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* 레이아웃 구조 */

#layout {
  max-width: 1200px;
  margin: auto;
  height: 80vh;
}


/* 헤더 스타일 */

header {
  display: flex;
}

img {
  display: block;
}


/* 로고 스타일 */

header #logo {
  top: 0;
  left: 0;
  display: block;
}

header ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

header ul li {
  flex-direction: column;
  position: relative;
  margin: auto;
  list-style-type: none;
}


/* 메인 메뉴 스타일 */

ul li .main-menu {
  /* position: relative; */
  text-decoration: none;
  color: powderblue;
  font-size: 1.5rem;
  display: block;
  height: 40px;
}


/* 서브 메뉴 스타일 */

.sub-menu {
  cursor: pointer;
  text-align: center;
  top: 100%;
  left: 0;
  width: 100%;
  position: absolute;
  height: 0;
  transition: 1.5s;
  overflow: hidden;
}


/* 메뉴 호버 효과 */

.main-menu:hover {
  animation: main-menu-hover 3s both ease;
  border-radius: 10%;
}

@keyframes main-menu-hover {
  0% {
    background-color: green;
  }
  50% {
    background-color: gray;
  }
  100% {
    background-color: green;
  }
}

header li:hover .sub-menu {
  height: 200px;
  background-color: azure;
  line-height: 1.8;
  border-radius: 20%;
}

.sub-menu li:hover {
  animation: menu-to-scale 0.5s both ease;
}

@keyframes menu-to-scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

header li.community:hover .sub-menu {
  height: 80px;
}

.sub-menu li:hover {
  background-color: bisque;
  transition: 0.5s;
}

.sub-menu li {
  border-radius: 20%;
}


/* 메인 슬라이드 섹션 스타일 */

#imgs {
  display: flex;
  height: 40vh;
  border: 3px solid red;
  overflow: hidden;
  animation: slide_img 10s ease alternate-reverse infinite;
  width: 100%;
  position: absolute;
  /* flex-direction: column; */
}

@keyframes slide_img {
  0%,
  100% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
}

#slide>#img {
  flex: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>웹사이트 만들기</title>

  <link rel="stylesheet" href="web.css?after" />
</head>

<body>
  <div id="layout">
    <header>
      <!-- 로고 -->
      <div id="logo">
        <img src="/0712 웹사이트/images/logo.jpg" alt="로고" />
      </div>
      <!-- 네비게이션 메뉴 (메인 메뉴 및 서브 메뉴) -->
      <ul>
        <li>
          <a href="#" class="main-menu">펜션소개</a>
        </li>
        <li>
          <a href="#" class="main-menu">룸 미리보기</a>
          <nav class="sub-menu">
            <li>사랑 하나<span>(최대2인)</span></li>
            <li>설렘 둘<span>(최대 4인)</span></li>
            <li>아침 한스푼<span>(최대2인)</span></li>
            <li>고요 두스푼<span>(최대4인)</span></li>
          </nav>
        </li>
        <li class="community">
          <a href="#" class="main-menu">커뮤니티</a>
          <nav class="sub-menu">
            <li>예약하기</li>
            <li>문의하기</li>
            <li>갤러리</li>
          </nav>
        </li>
      </ul>
    </header>

    <!-- 메인 헤딩 -->
    <h1 id="center-text">
      당신을 위한 힐링타임<br />아침고요펜션과 함께 하세요.
    </h1>
    <!-- 슬라이드 이미지 -->

    <section id="slide">
      <div id="imgs">
        <img src="images/slide-1.jpg" alt="슬라이드1" />
        <img src="images/slide-2.jpg" alt="슬라이드2" />
        <img src="images/slide-3.jpg" alt="슬라이드3" />
      </div>
    </section>

    <main>
      <section id="notice">
        <!-- 공지사항 목록 -->
        <h2>공지사항</h2>
        <a href="#">-진짜 아기랑 남편이랑 잘 쉬다 왓어요!!<span>2018-03-25</span></a
          >
          <a href="#">-엄청 만족합니다.<span>2018-02-13</span></a>
        <a href="#">-감사합니다.<span>2017-12-09</span></a>
        <a href="#">-잘 쉬고 왔습니다.<span>2017-08-19</span></a>
        <a href="#">-3일간 머물고 왔습니다.<span>2017-05-26</span></a>
        <a href="#">-가을에 한번 더 가려고 합니다.<span>2017-03-07</span></a>
      </section>

      <section id="partner">
        <div>
          <img src="/0712 웹사이트/images/partner.jpg" alt="협력사" id="partners_logo" />
          <button id="close">닫기</button>
        </div>
        <p>사계절 바베큐장<br />쿡TV & 와이파이</p>
        <p>-남이섬 집 라인</p>
        <p>-쁘띠 프랑스</p>
        <p>-자라섬 재즈페스티벌</p>
        <p>-가평 사계절 썰매장</p>
        <!-- 협력사 콘텐츠 -->
      </section>

      <section id="banner">
        <!-- 아이콘형 배너 버튼들 -->
        <div>
          <img src="images/icon_01.png" alt="펜션 알림판" />
          <img src="images/icon_02.png" alt="펜션 행사일정" />
          <img src="images/icon_03.png" alt="사용자 이용규칙" />
        </div>
      </section>
    </main>

    <footer>
      <div id="rules">
        <a href="#">법적고지</a>
        <a href="#">개인정보보호방침</a>
        <a href="#">개인정보처리방침</a>
      </div>
      <div id="info">
        <p>입금: 농협 302-1051-7449-71 최주희</p>
        <p>문의전화 : <a href="tel:010-0000-0000">010-8949-1927</a></p>
        <p>이메일 : <a href="email">[email protected]</a></p>
        <p>주소 : 경기 가평군 상면 수목원로 380</p>
      </div>
      <div id="brand">
        <p>상호명: 주식회사 비즈온네트웍스</p>
        <p>사업자등록번호: 244-87-00033</p>
        <p>대표자: 이희민</p>
        <p>사이트제작: 비즈온네트웍스</p>
      </div>
      <!-- 푸터 정보 (링크, 연락처 등) -->
    </footer>
  </div>
</body>

</html>

For further study, check this site:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation

- PAX
- July 13, 2024 at 2:52 pm
- 0 votes
0
- The fact is that you should put the animation property on each img inside #imgs and not dirrectly imgs because you want to slide each image not the container.
- Moreover, the values that you set in the animation property contradict them selves, it for example can’t be ease and linear.
I modified bearly your code, but you should get it :
```
#imgs img {
  width: 200px;
  height: 200px;
  display: block;
  animation: slide_img 10s ease alternate-reverse infinite;
}
#imgs {
  display: flex;
  flex-direction: row;
width: 200px;
  height: 40vh;
  border: 3px solid red;
  overflow: hidden;  position: absolute;
  /* flex-direction: column; */ 
}
```
However, you should organize your css,like this it will be easier for you to debug :
```
#imgs {
    width: 200px;
    height: 40vh;

    border: 3px solid red;

    display: flex;
    flex-direction: row;
    
    overflow: hidden;
}
```
By the way, you can use your browser inspector to analyze toyr code, if you are on something like chrome or chromium, you’ll dirrectly see an exclamation point on some properties like the animation one that shows you why it doesn’t work.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.