연습장:Sakura: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 2월 25일 (토) 21:19
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
편집 요약 없음
4번째 줄: 4번째 줄:
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


<!-- swiper슬라이더 메인컨테이너 -->
<div id="main-banner" class="swiper-container">
<div class="swiper-container">
  <!-- 보여지는 영역 -->
   <div class="swiper-wrapper">
   <div class="swiper-wrapper">
     <!-- div class="swiper-slide" 를 추가하면된다 -->
     <div class="swiper-slide">
    <div class="swiper-slide">Slide 1</div>
      <div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스'">
     <div class="swiper-slide">Slide 2</div>
      </div>
    <div class="swiper-slide">Slide 3</div>
    </div>
     <div class="swiper-slide">Slide 4</div>
     <div class="swiper-slide">
    <div class="swiper-slide">Slide 5</div>
      <div id="banner" class="hannara" onclick="location.href='/w/index.php/한나라닷컴'">
     <div class="swiper-slide">Slide 6</div>
      </div>
    </div>
     <div class="swiper-slide">
      <div id="banner" class="ana" onclick="location.href='/w/index.php/아름다운_나라'">
      </div>
     </div>
   </div>
   </div>
  <!-- 페이징 버튼 처리 -->
   <div class="swiper-pagination"></div>
   <div class="swiper-pagination"></div>
  <!-- 방향 버튼 상황에 따라 추가 삭제가능 -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-button-next"></div>
</div>
</div>
<style>
<style>
//초기설정
#main-banner {
html, body {
    width: calc(100% + 30px);
      position: relative;
    height: 300px;
      height: 100vh;
     margin-left: -1.0rem;
     }
}
     //초기 설정
.swiper-container {
     body {
     margin-left: auto;
      background: #eee;
    margin-right: auto;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     position: relative;
      font-size: 14px;
    overflow: hidden;
      color:#000;
    list-style: none;
      margin: 0;
    padding: 0;
      padding: 0;
    z-index: 1;
     }
}
    //.swiper-container 설정
 
     .swiper-container {
.swiper-wrapper {
      width: 100%;
    position: relative;
      height: 100vh;
    width: 100%;
     }
    height: 100%;
    //.swiper-slide 설정
    z-index: 1;
     .swiper-slide {
    display: flex;
      text-align: center;
    transition-property: transform;
      font-size: 18px;
     box-sizing: content-box;
      background: #fff;
}
 
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
     transition-property: transform;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
     position: relative;
    transition-property: transform;
}
.swiper-container-fade .swiper-slide {
     pointer-events: none;
    transition-property: opacity;
}
 
#main-banner .swiper-button-next { right: 30px; }
#main-banner .swiper-button-prev { left: 30px; }
 
#main-banner .swiper-button-next, #main-banner .swiper-button-prev {
    width: 40px !important;
    height: 40px;
    color: #222;
    font-size: 12px !important;
    box-sizing: border-box;
    border: 1px solid #bbb;
    border-radius: 50%;
    background-color: #fff;
    top: 50%;
}
#main-banner .swiper-button-prev:after, #main-banner .swiper-button-next:after {
    font-size: 18px !important;
    font-weight: 700;
}
 
#main-banner .swiper-pagination-bullet {
    opacity: 1;
    background-color: #ffffff;
}
#main-banner .swiper-pagination-bullet-active {
    background-color: #466DFA;
}
 
#banner {
    width: 100%;
    height: 300px;
    cursor: pointer;
}


      /* Center slide text vertically */
.flora {
      display: -webkit-box;
    background-color: #00A366;
      display: -ms-flexbox;
    color: #FFF;
      display: -webkit-flex;
}
      display: flex;
.hannara {
      -webkit-box-pack: center;
    background: linear-gradient(to right, rgba(0, 46, 109, 1) 0%, rgba(0, 46, 109, 0) 50%), url(/w/images/2/2d/나경원_내각총리대신_취임연설.jpg);
      -ms-flex-pack: center;
    background-repeat: no-repeat;
      -webkit-justify-content: center;
    background-size: cover;
      justify-content: center;
    color: #FFF;
      -webkit-box-align: center;
}
      -ms-flex-align: center;
.ana {
      -webkit-align-items: center;
    background-color: #000070;
      align-items: center;
    color: #FFF;
    }
}
   
//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음
.swiper-container-vertical>.swiper-pagination-bullets{
    top: unset !important;
    bottom: 10px;
    left: 0;
    width: 100%;
}
//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  display : inline-block !important;
  margin: 6px 2px !important;
}
</style>
</style>
<script>
<script>
83번째 줄: 122번째 줄:
   direction: 'horizontal',
   direction: 'horizontal',
   //한번에 보여지는 페이지 숫자
   //한번에 보여지는 페이지 숫자
   slidesPerView: 3,
   slidesPerView: 1,
   //페이지와 페이지 사이의 간격
   //페이지와 페이지 사이의 간격
   spaceBetween: 30,
   spaceBetween: 30,
100번째 줄: 139번째 줄:
   //자동 스크를링
   //자동 스크를링
   autoplay: {
   autoplay: {
    //시간 1000 이 1초
//시간 1000 이 1초
    delay: 2500,
delay: 2500,
    disableOnInteraction: false,
disableOnInteraction: false,
   },
   },
    
    
   //페이징
   //페이징
   pagination: {
   pagination: {
    //페이지 기능
//페이지 기능
    el: '.swiper-pagination',
el: '.swiper-pagination',
    //클릭 가능여부
//클릭 가능여부
    clickable: true,
clickable: true,
   },
   },


   //방향표
   //방향표
   navigation: {
   navigation: {
    //다음페이지 설정
//다음페이지 설정
    nextEl: '.swiper-button-next',
nextEl: '.swiper-button-next',
    //이전페이지 설정
//이전페이지 설정
    prevEl: '.swiper-button-prev',
prevEl: '.swiper-button-prev',
   },
   },
    
    
});
});
let $slides = document.querySelectorAll('.swiper-slide');
for (let i of $slides) {
  i.addEventListener('mouseover', function(){
    swiper.autoplay.stop();
  });
  i.addEventListener('mouseout', function(){
    swiper.autoplay.start();
  });
}
</script>
</script>
</html>
</html>

2023년 2월 25일 (토) 21:19 판