연습장:Sakura 문서 원본 보기

<html>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<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 id="banner" class="rhizome" onclick="location.href='/w/index.php/리좀'">
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<style>
#main-banner {
        width: calc(100% + 30px);
        height: 300px;
        margin-left: -1.0rem;
}
.swiper-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
}

.swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
}

.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; padding-left: 3px; }
#main-banner .swiper-button-prev { left: 30px; padding-right: 3px; }

#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;
}

.flora {
        background-color: #00A366;
        color: #FFF;
}
.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 {
        background-color: #000070;
        color: #FFF;
}
.rhizome {
        background-color: #041E42;
        color: #FFF;
}
</style>
<script>
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');
for (let i of $slides) {
    i.addEventListener('mouseover', function(){
        swiper.autoplay.stop();
    });
    i.addEventListener('mouseout', function(){
        swiper.autoplay.start();
    });
}
</script>
</html>