편집 요약 없음 태그: 되돌려진 기여 |
태그: 편집 취소 |
||
| 4번째 줄: | 4번째 줄: | ||
<script src="https://evewiki.kr/mainpage/swiper-10.2.0/package/swiper-bundle.min.js"></script> | <script src="https://evewiki.kr/mainpage/swiper-10.2.0/package/swiper-bundle.min.js"></script> | ||
</head></html> | </head></html> | ||
<div class="swiper sm:min-h-[58vw]"> | |||
<!----><div class="swiper-wrapper"> | |||
<!----><!----><div class="swiper-slide bg-emerald-200"></div> | |||
<!----><!----><div class="swiper-slide bg-emerald-300"></div> | |||
<!----><!----><div class="swiper-slide bg-emerald-400"></div> | |||
<!----><!----><div class="swiper-slide bg-emerald-500"></div> | |||
<!----><!----><div class="swiper-slide bg-emerald-600"></div> | |||
<!----><!----><div class="swiper-slide bg-emerald-700"></div> | |||
<!----></div> | |||
<!----><div class="swiper-button-prev"></div> | |||
<!----><div class="swiper-button-next"></div> | |||
<!----><div class="swiper-pagination !w-auto !left-auto !right-0"></div> | |||
</div> | |||
<!-- swiper 슬라이드 css --> | |||
{{#css: | |||
.swiper .swiper-button-prev, .swiper .swiper-button-next { | |||
opacity: 0; | |||
transition: .3s cubic-bezier(0,0,.5,1); | |||
background: rgba(255,255,255,.32); | |||
} | |||
.swiper:hover .swiper-button-prev, .swiper:hover .swiper-button-next { | |||
opacity: 1; | |||
} | |||
.swiper .swiper-button-prev:hover, .swiper .swiper-button-next:hover { | |||
background: rgba(255,255,255,1); | |||
} | |||
.swiper .swiper-button-prev { | |||
left: 3rem; | |||
} | |||
.swiper .swiper-button-next { | |||
right: 3rem; | |||
} | |||
.swiper .swiper-button-next, .swiper .swiper-button-prev { | |||
width: 3rem; | |||
height: 3rem; | |||
color: #000; | |||
border-radius: 50%; | |||
} | |||
.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after { | |||
font-size: 15px; | |||
font-weight: 900; | |||
} | |||
}} | |||
<!-- content 레이아웃 날리기 --> | <!-- content 레이아웃 날리기 --> | ||
{{#css: | {{#css: | ||