본문 바로가기
프론트엔드 개발자/JS

자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(4) swiper 자바스크립트 애니메이션, 수정하기

by 신디블로그 2023. 4. 13.
SMALL

 

 

 <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .swiper-slide img {
        width: 100vw;
    }

    .banner .navi-box {
        position: absolute;
        left: 50%;
        bottom: 20%;
        z-index: 10;
    }

    .banner .navi-box .swiper-pagination {
        position: relative;
        width: 200px;
    }

    .banner .navi-box .swiper-pagination span {
        display: block;
        width: 100%;
        border-radius: 0;
        position: absolute;
        left: 0; top: 0;
        opacity: 0;
    }

    .banner .navi-box .swiper-pagination .swiper-pagination-bullet-active {
        background-color: #000;
        opacity: .2;
    }
    
    .banner .navi-box .swiper-pagination span::before {
        width: 0%;
        height: 100%;
        content: '';
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
    }

    .banner .navi-box .swiper-pagination span.swiper-pagination-bullet-active::before {
        opacity: 1;
        width: 100%;
        animation-name: ani;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: both;
    }

    @keyframes ani {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }


</style>
<body>
    <div class="banner">
        <!-- swiper start -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="lg/01.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="lg/02.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="lg/03.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="lg/04.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="lg/05.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="lg/06.jpg" alt="">
                </div>
            </div>
            <div class="navi-box">
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- swiper end -->
    </div>
    


    <script src="swiper/swiper-bundle.min.js"></script>
    <script>
        let swiper01 = new Swiper ('.swiper01', {
            effect : 'fade' ,
            autoplay : {
                delay : 2000,
            },
            pagination : {
                el : '.swiper-pagination',

            }
        })



    </script>
 
 <style>

        * {
            margin:0; padding:0;
            box-sizing: border-box;
        }
        body {
            padding: 50px;
        }

        .spacer {
            height: 50px;
        }

        .swiper {
            width: 800px;
            height: 300px;
            background: #ccc;
            position: relative;
        }
        .swiper .pagi {
            position: absolute;
            left:0; bottom:30px;    
            width: 100%;
            text-align: center;
        }
        .swiper .pagi span {
            background:#f00;
            display:inline-block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
        }
        .swiper .pagi span.active {
            background: #0f0;
        }

        .swiper01 .navibox {
            position: absolute;
            left:50%; top:50%;
            background-color: #888;
        }
        .swiper01 .navibox .pagi {
            position: static;
            width: 200px;
        }
        .swiper01 .navibox .pagi span {
            display: block;
            width: 100%;
            border-radius: 0;
            position: absolute;
            left: 0; top: 0;
            opacity: 0;
        }

        .swiper01 .navibox .pagi span.active {
            opacity: 1;
        }



    </style>
</head>
<body>
    <div class="swiper">
        <div class="pagi">
            <span>1</span>
            <span class="active">2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
    <div class="spacer"></div>
    <div class="swiper swiper01">
        <div class="navibox">
            <div class="pagi">
                <span>1</span>
                <span class="active">2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
        </div>
    </div>
    <div class="spacer"></div>
</body>
</html>
 

 

LIST
저작자표시 비영리 변경금지

'프론트엔드 개발자 > JS' 카테고리의 다른 글

자바스크립트 javascript 12. (2) 움직이면 고정되는 스크롤바 만들기  (0) 2023.04.13
자바스크립트 javascript 12. scroll eventjquery 기반 scrollTop() , offset, jQueury animate(), 매개변수활용하기 (1)  (0) 2023.04.13
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(3) 클론코딩 연습하기  (0) 2023.04.13
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2)  (0) 2023.04.10
자바스크립트 javascript 11. OOP 객체지향프로그래밍  (0) 2023.04.10

관련글

댓글

티스토리툴바