이브위키:연습장/대문: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 2월 21일 (화) 22:39
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
< 이브위키:연습장
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
편집 요약 없음
19번째 줄: 19번째 줄:
   <div class="container">
   <div class="container">
     <div class="slide slide_wrap">
     <div class="slide slide_wrap">
       <div class="slide_item item1">1</div>
       <div class="slide_item item1">
        <div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스/'">
          <div class="main-banner-body">
            <div class="flora-1">
              <img alt="플로라.svg" src="https://evewiki.kr/w/images/1/18/플로라.svg" style="width: auto; height: 100px;">
            </div>
            <div class="flora-2">
              <span style="font-size: 1.75rem; font-weight: 700;">플로라 유니버스</span><br>
              <span style="font-size: 1.0rem; font-weight: 700;">한국 정치를 우리들 생각대로 만들어보자!</span>
            </div>
          </div>
        </div>
      </div>
       <div class="slide_item item2">2</div>
       <div class="slide_item item2">2</div>
       <div class="slide_item item3">3</div>
       <div class="slide_item item3">3</div>
       <div class="slide_item item4">4</div>
       <div class="slide_item item4">4</div>
       <div class="slide_item item5">5</div>
       <div class="slide_item item5">5</div>
      <div class="slide_item item6">6</div>
      <div class="slide_item item7">7</div>
       <div class="slide_prev_button slide_button"></div>
       <div class="slide_prev_button slide_button"></div>
       <div class="slide_next_button slide_button"></div>
       <div class="slide_next_button slide_button"></div>
117번째 줄: 131번째 줄:
}
}


/* 각 슬라이드가 변경되는 것을 시각적으로 확인하기 쉽도록 각 슬라이드별 색상 적용 */
/* 슬라이드 */
.slide_item.item1 {
#banner {
   background-color: darkgoldenrod;
   cursor: pointer;
}
}
.slide_item.item2 {
.flora {
   background-color: aqua;
  width: 100%;
  height: 100%;
   background-color: #00A366;
}
}
.slide_item.item3 {
.main-banner-body {
   background-color: blueviolet;
   width: 1290px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
}
.slide_item.item4 {
.flora-1 {
   background-color: burlywood;
   margin-top: 65px; margin-left: 100px;
}
}
.slide_item.item5 {
.flora-2 {
   background-color: cornflowerblue;
   margin-top: 15px; margin-left: 100px;
}
}


372번째 줄: 391번째 줄:
let loopInterval = setInterval(() => {
let loopInterval = setInterval(() => {
   nextMove();
   nextMove();
}, 3000);
}, 6000);


// 슬라이드에 마우스가 올라간 경우 루프 멈추기
// 슬라이드에 마우스가 올라간 경우 루프 멈추기
383번째 줄: 402번째 줄:
   loopInterval = setInterval(() => {
   loopInterval = setInterval(() => {
     nextMove();
     nextMove();
   }, 3000);
   }, 6000);
});
});
</script>
</script>

2023년 2월 21일 (화) 22:39 판

　대문　이용약관　도움말　문의 　

Vanilla js auto loop slide

2
3
4
5
6
7