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

자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2)

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

 

 

/// swiper js

- 자바스크립트를 기반으로 한 슬라이드 라이브러리

- 거의모든 웹사이트에서 사용하는 대표적인 Lib

- 커스터마이징이 아주 자유로움(자바스크립트에 대한 지식을 요구)

 

/// 스와이퍼 사용법

 

1. 공식사이트 (swiperjs)에서

스와이퍼.js

스와이퍼.css

--> download, CDN 파일 연결

 

스와이퍼 인스톨

 

1) NPM ( Node pakage manager) 방식

- nodejs가 설치되어있어야함. ( CLI방식)

2) CDN ( Common Delivery Network )

 

 

2. 스와이퍼 기본구조를 바탕으로

HTML마크업하기

 

기본구조1)

div.swiper

div.swiper-wrapper

div.swiper-slide

 

기본구조2)

div.swiper

ul.swiper-wrapper

li.swiper-slide

 

 

page navi --> 슬라이더 하단 페이지 표시

 

swiper 기본적으로 제공하는 디자인사용할 경우

.swiper-pagination 클래스 사용하기

 

커스텀모드(사용자가 직접 디자인 할 경우)

클래스명은 중복되지 않는 선에서 임의로 작성.

 

 

 

control navi --> 슬라이더 좌우 이전, 다음보기 버튼

 

swiper 기본적으로 제공하는 디자인사용할 경우

.swiper-button-prev

.swiper-button-next

 

 

3. 스와이퍼 슬라이더를 작동시키는 스크립트 작성하기.

 

   <!-- swiper css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    <style>

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

        .main-slider {
            width: 100%;
            height: 970px;
            background-color: #f00;
            position: relative;
        }
        .main-slider::before {
            content: '';
            width: 50%;
            height: 150px;
            position: absolute;
            left:0; bottom:0;
            background-color: #fff;
            z-index: 10;
            clip-path: polygon(0 0,100% 100%,0 100%);
        }
        .main-slider::after {
            content: '';
            width: 50%;
            height: 150px;
            position: absolute;
            right:0; bottom:0;
            background-color: #fff;
            z-index: 10;
            clip-path: polygon(0 100%,100% 0,100% 100%);
        }

        /* 페이지 네비게이션 커스텀하기 */
        .main-slider .swiper-pagination {
            bottom:300px;
            left:50%;
            display: flex;
            align-items: center;
            margin-left: -400px;
        }
        .main-slider .swiper-pagination-bullet {
            width: 8px; height: 8px;
            border-radius: 100%;
            background: #efefef;
        }
        .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
        .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
            margin:0 20px;
        }
        .main-slider .swiper-pagination-bullet-active {
            background-color:transparent;
            width: 30px;
            height: 30px;
            border: 3px solid #f00;
            border-radius: 100%;
        }

    </style>
</head>
<body>
    <!-- main slider start -->
    <div class="main-slider">
        <!-- swiper start -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="kt/01.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="kt/02.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="kt/03.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="kt/04.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="kt/05.png" alt="">
                </div><!-- swiper slide end -->
            </div><!-- swiper wrapper end -->
            <!-- page navigation -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- swiper end -->
    </div>
    <!-- main slider end -->


    <!-- swiper js -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>


    <!-- page js -->
    <script>

        let mainSlider = new Swiper('.swiper01',{
            // 여기에 옵션을 작성하기
            loop : true, // 반복여부 설정
            autoplay : {
                delay : 3000, // 자동실행 딜레이는 3초
            },
            pagination : {
                el : '.swiper-pagination', // 페이지내비 생성할 요소 지정
                clickable : true, // 클릭가능으로 변경하기
            },
        });

    </script>
 
 <!-- swiper css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    <style>

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

        .main-slider {
            width: 100%;
            height: 640px;
        }
        .main-slider .control-box {
            position: absolute;
            background-color: #f00;
            left:50%; bottom:100px;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            padding:10px 20px;
            align-items: center;
            gap: 10px;
        }

        .main-slider .control-box button {
            flex: none;
            width: 30px;
            height: 30px;
            background-color: #0f0;
            text-indent: -9999px;
        }

        .main-slider .control-box .swiper-pagination {
            position: static;
        }

        

    </style>
</head>
<body>
    <!-- main slider start -->
    <div class="main-slider">
        <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><!-- swiper slide end -->
            </div><!-- swiper wrapper end -->
            <!-- 이곳에 네비게이션을 작성 -->
            <!-- 커스텀모드+디폴트 모드 같이 작성 -->
            <div class="control-box">
                <button class="prev-btn">이전보기</button>
                <div class="swiper-pagination"></div>
                <button class="next-btn">다음보기</button>
            </div>
        </div>
        <!-- swiper end -->
    </div>
    <!-- main slider end -->


    <!-- swiper js -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>


    <!-- page js -->
    <script>

        let main_slider = new Swiper('.swiper01', {
            loop : true,
            autoplay : {
                delay : 4000,
            },
            pagination : {
                el : '.swiper-pagination',
                type : 'fraction',
                clickable : true,
            },
            navigation : {
                prevEl : '.prev-btn',
                nextEl : '.next-btn',
            }
        });

    </script>
 
  <!-- swiper css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    <style>

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

        .main-slider {
            width: 725px;
            height: 320px;
            margin: 0 auto;
            border-radius: 30px;
            overflow: hidden;
        }

        .main-slider .control-box {
            position: absolute;
            right:30px; top:30px;
            background-color: #f00;
            display: flex;
            align-items: center;
            z-index: 10;
            gap : 15px;
        }
        .main-slider .control-box .swiper-pagination {
            position: static;
        }

        
        

    </style>
</head>
<body>
    <!-- main slider start -->
    <div class="main-slider">
        <!-- swiper start -->
        <div class="swiper banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="nps/banner1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="nps/banner2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="nps/banner6.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="nps/banner7.png" alt="">
                </div>
            </div>
            <!-- navigation area -->
            <div class="control-box">
                <div class="swiper-pagination">1/3</div>
                <button class="prev-btn">이전보기</button>
                <button class="next-btn">다음보기</button>
            </div>
        </div>
        <!-- swiper end -->
    </div>
    <!-- main slider end -->


    <!-- swiper js -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>


    <!-- page js -->
    <script>

        let banner = new Swiper('.banner', {
            loop : true,
            autoplay : {
                delay : 3000,
            },
            pagination : {
                el : '.swiper-pagination',
                type : 'fraction',
                clickable : true,

            },
            navigator : {
                prevEl : '.prev-btn',
                nextEl : '.next-btn',
            }
        });

    </script>
</body>
 
  <!-- 01 Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    <style>

        * {
            margin:0;
            padding:0;
        }
        h2 {
            text-align: center;
            font-size: 50px;
            padding: 50px 0;
        }

        .slider-box {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            background-color: #ccc;
        }

        .slider-box1 {
            width: 1240px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
        }
        .slider-box2 {
            width: 100%;
            background-color: #ccc;
        }
        .slider-box3 img {
            width: 100%;
            display: block;
        }

    </style>
</head>
<body>
    <h2>Swiper 슬라이더 기본형 1</h2>
    <!-- 03 슬라이더가 들어갈 박스를 생성하기 -->
    <div class="slider-box">
        <!-- swiper start -->
        <!-- 클래스명은 변경가능, 입문단계는 권장하지 않음 -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <!-- 슬라이더 컨텐츠가 들어가는 박스 -->
                <div class="swiper-slide">
                    <img src="600x400/01.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="600x400/02.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="600x400/03.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="600x400/04.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- swiper end -->
    </div>
    <h2>Swiper 기본형 2</h2>
    <!-- 슬라이더가 들어갈 박스 생성 -->
    <div class="slider-box1">
        <!-- swiper start -->
        <div class="swiper swiper02">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">
                    <img src="lg2/01.jpg" alt="">
                </li>
                <li class="swiper-slide">
                    <img src="lg2/02.jpg" alt="">
                </li>
                <li class="swiper-slide">
                    <img src="lg2/03.jpg" alt="">
                </li>
                <li class="swiper-slide">
                    <img src="lg2/04.jpg" alt="">
                </li>
            </ul>
        </div>
        <!-- swiper end -->
    </div>
    <h2>기본형 : 좌우버튼, 페이지 네비게이션 달기</h2>
    <!-- 슬라이더 박스 -->
    <div class="sldier-box2">
        <!-- swiper start -->
        <div class="swiper swiper03">
            <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><!-- swiper slide end -->
            </div><!-- swiper wrapper end -->
            <!-- swiper pagination -->
            <div class="swiper-pagination"></div>
            <!-- swiper control navigation -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!-- swiper end -->
    </div>




    <!-- 02 swiper js -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

    <!-- 04 swiper 실행시키는 스크립트 작성하기 -->
    <script>

        /* 
            생성자 함수를 이용하여
            function Swiper(매개변수) {
                this.값이름 = 매개변수;
            }
        */

        // swiper01
        let mySwiper1 = new Swiper('.swiper01',{});

        // swiper02
        let mySwiper2 = new Swiper('.swiper02', {})

        // swiper03
        let mySwiper3 = new Swiper('.swiper03', {
            // 옵션을 여기에 작성합니다......
            pagination : {
                // 페이지 네비를 표현할 요소를 지정
                el : '.swiper-pagination',
                clickable : true
            },
            navigation : {
                // 좌우버튼을 표현할 요소를 지정
                nextEl : '.swiper-button-next',
                prevEl : '.swiper-button-prev'
            }
        });

    </script>
 
 

 

 

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

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

자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(4) swiper 자바스크립트 애니메이션, 수정하기  (0) 2023.04.13
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(3) 클론코딩 연습하기  (0) 2023.04.13
자바스크립트 javascript 11. OOP 객체지향프로그래밍  (0) 2023.04.10
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!  (0) 2023.04.07
자바스크립트 javascript 9. 자바스크립트 DOM, 다양한 효과넣기  (0) 2023.04.07

관련글

댓글

티스토리툴바