편집 요약 없음 |
편집 요약 없음 |
||
| 5번째 줄: | 5번째 줄: | ||
<div id="main-banner" class="swiper-container"> | <div id="main-banner" class="swiper-container"> | ||
<div class="swiper-wrapper"> | |||
<div class="swiper-slide"> | |||
<div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스'"> | |||
</div> | |||
</div> | |||
<div class="swiper-slide"> | |||
<div id="banner" class="hannara" onclick="location.href='/w/index.php/한나라닷컴'"> | |||
</div> | |||
</div> | |||
<div class="swiper-slide"> | |||
<div id="banner" class="ana" onclick="location.href='/w/index.php/아름다운_나라'"> | |||
</div> | |||
</div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"></div> | |||
<div class="swiper-slide"> | |||
<div id="banner" class="rhizome" onclick="location.href='/w/index.php/리좀'"> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<div class="swiper- | <div class="swiper-pagination"></div> | ||
<div class="swiper-button-prev"></div> | |||
<div class="swiper-button-next"></div> | |||
</div> | </div> | ||
<style> | <style> | ||
#main-banner { | #main-banner { | ||
width: calc(100% + 30px); | |||
height: 300px; | |||
margin-left: -1.0rem; | |||
} | } | ||
.swiper-container { | .swiper-container { | ||
margin-left: auto; | |||
margin-right: auto; | |||
position: relative; | |||
overflow: hidden; | |||
list-style: none; | |||
padding: 0; | |||
z-index: 1; | |||
} | } | ||
.swiper-wrapper { | .swiper-wrapper { | ||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 1; | |||
display: flex; | |||
transition-property: transform; | |||
box-sizing: content-box; | |||
} | } | ||
.swiper-slide { | .swiper-slide { | ||
flex-shrink: 0; | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
transition-property: transform; | |||
} | } | ||
.swiper-slide { | .swiper-slide { | ||
flex-shrink: 0; | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
transition-property: transform; | |||
} | } | ||
.swiper-container-fade .swiper-slide { | .swiper-container-fade .swiper-slide { | ||
pointer-events: none; | |||
transition-property: opacity; | |||
} | } | ||
| 93번째 줄: | 93번째 줄: | ||
#main-banner .swiper-button-next, #main-banner .swiper-button-prev { | #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 { | #main-banner .swiper-button-prev:after, #main-banner .swiper-button-next:after { | ||
font-size: 18px !important; | |||
font-weight: 700; | |||
} | } | ||
#main-banner .swiper-pagination-bullet { | #main-banner .swiper-pagination-bullet { | ||
opacity: 1; | |||
background-color: #ffffff; | |||
} | } | ||
#main-banner .swiper-pagination-bullet-active { | #main-banner .swiper-pagination-bullet-active { | ||
background-color: #466DFA; | |||
} | } | ||
#banner { | #banner { | ||
width: 100%; | |||
height: 300px; | |||
cursor: pointer; | |||
} | } | ||
.flora { | .flora { | ||
background-color: #00A366; | |||
color: #FFF; | |||
} | } | ||
.hannara { | .hannara { | ||
background: linear-gradient(to right, rgba(0, 46, 109, 1) 0%, rgba(0, 46, 109, 0) 50%), url(/w/images/2/2d/나경원_내각총리대신_취임연설.jpg); | |||
background-repeat: no-repeat; | |||
background-size: cover; | |||
color: #FFF; | |||
} | } | ||
.ana { | .ana { | ||
background-color: #000070; | |||
color: #FFF; | |||
} | } | ||
.rhizome { | .rhizome { | ||
background-color: #041E42; | |||
color: #FFF; | |||
} | } | ||
</style> | </style> | ||
<script> | <script> | ||
const swiper = new Swiper('.swiper-container', { | const swiper = new Swiper('.swiper-container', { | ||
//기본 셋팅 | |||
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평 | |||
direction: 'horizontal', | |||
//한번에 보여지는 페이지 숫자 | |||
// slidesPerView: 1, | |||
//페이지와 페이지 사이의 간격 | |||
spaceBetween: 30, | |||
//드레그 기능 true 사용가능 false 사용불가 | |||
debugger: true, | |||
//마우스 휠기능 true 사용가능 false 사용불가 | |||
mousewheel: true, | |||
//반복 기능 true 사용가능 false 사용불가 | |||
loop: true, | |||
//선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt | |||
centeredSlides: true, | |||
// 페이지 전환효과 slidesPerView효과와 같이 사용 불가 | |||
effect: 'fade', | |||
//자동 스크를링 | |||
autoplay: { | |||
//시간 1000 이 1초 | |||
delay: 2500, | |||
disableOnInteraction: false, | |||
}, | |||
speed: 300, | |||
//페이징 | |||
pagination: { | |||
//페이지 기능 | |||
el: '.swiper-pagination', | |||
//클릭 가능여부 | |||
clickable: true, | |||
}, | |||
//방향표 | |||
navigation: { | |||
//다음페이지 설정 | |||
nextEl: '.swiper-button-next', | |||
//이전페이지 설정 | |||
prevEl: '.swiper-button-prev', | |||
}, | |||
}); | }); | ||
let $slides = document.querySelectorAll('.swiper-slide'); | let $slides = document.querySelectorAll('.swiper-slide'); | ||
for (let i of $slides) { | 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월 26일 (일) 23:56 판