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

자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(3) 클론코딩 연습하기

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

 

​

 

 

<link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>

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

        h2 {
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            background: #eee;
        }

        .bing {
            width: 1542px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
            position: relative;
        }

        .bing .swiper-slide a {
            display: block;
            text-align: center;
            text-decoration: none;
            color:#333;
            font-size: 18px;
        }
        .bing .swiper-slide img {
            display: block;
            width: 100%;
        }
        .bing .swiper-slide .img-link {
            margin-bottom: 12px;
        }
        .bing .swiper-slide .txt-link {
            background: #fc0;
            line-height: 43px;
            border-radius: calc(43px / 2);
        }

        .bing .prev-btn,
        .bing .next-btn {
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        .bing .prev-btn {
            left:-80px;
        }
        .bing .next-btn {
            right:-80px;
        }
    </style>
</head>
<body>
    <h2>행복한 빙그레의 맛</h2>
    <div class="bing">
        <!-- swiper start -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img01.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img02.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img03.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img04.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img05.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img06.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img07.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img08.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="bing/sec02_img09.png" alt="">
                    </a>
                    <a href="#" class="txt-link">커피</a>
                </div>
            </div>
        </div>
        <!-- swiper end -->
        <!-- 좌우버튼 네비게이션 -->
        <button class="prev-btn">이전보기</button>
        <button class="next-btn">다음보기</button>
    </div>

    <!-- 

        네비게이션 -- 슬라이드영역 안에 있을때
            wrapper뒤에 작성을 권장

        네비게이션 -- 슬라이드영역 밖에 있을때
            swiper밖에 작성을 권장`

    -->


    <script src="swiper/swiper-bundle.min.js"></script>
    <script>

        // swiper01
        let swiper01 = new Swiper('.swiper01', {
            slidesPerView : 6,
            spaceBetween : 18,
            navigation : {
                prevEl : '.prev-btn',
                nextEl : '.next-btn',
            }
        });

    </script>
 
<!-- swiper css -->
    <link rel="stylesheet" href="swiper/swiper-bundle.css">
    
    <style>

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

        h2 {
            font-size: 50px;
            line-height: 100px;
            text-align: center;
        }

        img {
            display: block;
            width: 100%;
        }

        .slider-box1 {
            width: 1500px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
        }

    </style>
</head>
<body>
    <h2>Carousel 기본형</h2>
    <div class="slider-box1">
        <!-- swiper start -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="300x362/01.jpg" alt="">
                </div>
                <div class="swiper-slide" alt="">
                    <img src="300x362/02.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/03.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/04.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/05.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/06.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/07.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/08.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/09.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="300x362/10.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- swiper end -->
    </div>


    <!-- swiper js -->
    <script src="swiper/swiper-bundle.js"></script>

    <script>

        // swiper01
        let swiper01 = new Swiper('.swiper01',{
            // 옵션작성
            loop : true,
            slidesPerView : 5, // 몇개의 슬라이더를 보여줄것인가
            spaceBetween : 20, // 슬라이드 사이의 여백
            centeredSlides : true, // 기준슬라이드(active)를 화면가운데로 배치
        });

    </script>
</body>
 

 

    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>

        * {
            margin:0; padding:0;
            box-sizing: border-box;
        }
        h2 {
            font-size: 45px;
            line-height: 100px;
            background: #eee;
            text-align: center;
        }

        .culture {
            width: 100%;
            border-bottom: 10px solid #000;
        }
        .culture .swiper-slide:nth-child(1) {
            background-color: #f3ebe0;
        }
        .culture .swiper-slide:nth-child(2) {
            background-color: #f9e5e0;
        }
        .culture .swiper-slide:nth-child(3) {
            background-color: #f7c7d5;
        }
        .culture .img-link {
            display: block;
            text-align: center;
        }
        .culture .img-link img {
            vertical-align: top;
        }

        .culture .swiper-button-prev {
            left:50%;
            transform: translateX(-640px);
        }
        .culture .swiper-button-next {
            right:50%;
            transform: translateX(640px);
        }
        .culture .navi-box {
            position: absolute;
            left:50%; bottom:160px;
            transform: translateX(-530px);
            z-index: 10;
            background: #fc0;
            display: flex;
            align-items: center;
            gap:10px;
        }
        .culture .navi-box > * {
            flex:none;
        }
        .culture .navi-box > a {
            width: 16px;
            height: 16px;
            background: #f00;
            text-indent: -999px;
        }
        .culture .navi-box .prev-btn {
            background: url(culture/prev.png) no-repeat;
        }
        .culture .navi-box .play-stop {
            background: url(culture/pause.png) no-repeat;
        }
        .culture .navi-box .play-stop.on {
            background: url(culture/play.png) no-repeat;
        }
        .culture .navi-box .next-btn {
            background: url(culture/next.png) no-repeat;
        }

        .culture .navi-box .swiper-pagination {
            position: static;
            width: auto; /* 스와이퍼 CSS기본값이 100%이므로 변경 */
        }
        .culture .navi-box .swiper-pagination-bullet {
            border-radius: 4px;
        }
        .culture .navi-box .swiper-pagination-bullet-active {
            width: 40px;
        }



    </style>
</head>
<body>
    <h2>문화포털 메인배너</h2>
    <div class="culture">
        <!-- swiper시작 -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="" class="img-link">
                        <img src="../culture/01.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="" class="img-link">
                        <img src="../culture/02.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="" class="img-link">
                        <img src="../culture/03.jpg" alt="">
                    </a>
                </div>
            </div><!-- wrapper end -->
            <!-- 기본좌우버튼 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- 네비박스 -->
            <div class="navi-box">
                <a href="#" class="prev-btn">이전보기</a>
                <a href="#" class="play-stop">정지/재생</a>
                <a href="#" class="next-btn">다음보기</a>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- swiper끝 -->
    </div>
 
 <script src="swiper/swiper-bundle.min.js"></script>
    <script>

        // swiper01
        let swiper01 = new Swiper('.swiper01', {

            autoplay : {
                delay : 3000,
            },
            navigation : {
                prevEl : '.swiper-button-prev, .prev-btn',
                nextEl : '.swiper-button-next, .next-btn'
            },
            pagination : {
                el : '.swiper-pagination',
                clickable : true,
            }

        });

        // play stop버튼 가져오기
        const play_stop = document.querySelector('.play-stop');

        // click 이벤트 생성하기
        play_stop.addEventListener('click', function() {
            // window.alert('test');
            // if문을 이용하여 on클래스의 유무를 체크하기
            if (play_stop.classList.contains('on')) {
                // 있을때 참
                // window.alert('있습니다');
                play_stop.classList.remove('on');
                // 스와이퍼를 플레이시키기
                swiper01.autoplay.start();
            } else {
                // 없을때 거짓
                // window.alert('없습니다');
                play_stop.classList.add('on');
                // 스와이퍼를 정지시키기
                swiper01.autoplay.stop();
            }
        });

        /* 
            play , stop -- 
            기본이미지 정지 ( 현재 플레이가 되고있는 상태 )
            눌렀을때   이미지를 play로 변경하기 ( 정지로 바꾸기 )

            play_stop ---------- 정지이미지 (스와이퍼동작하는 상태)
            play_stop.on --------- 플레이이미지 (스와이퍼정지 상태)

            클래스의 유무 ( on 클래스가 있냐 없냐를 체크 )

        */

    </script>
 
<link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>

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

        h2 {
            text-align: center;
            font-size: 45px;
            line-height: 100px;
            background: #eee;
        }

        .open-slide {
            width: 100%;
            border-bottom: 10px solid #000;
        }
        .open-slide .swiper01 {
            padding-bottom: 100px;
        }

        .open-slide .swiper-slide {
            transform: scale(.8);
            opacity: .5;
            transition: all 0.3s ease-in-out;
        }
        .open-slide .swiper-slide-active {
            transform: scale(1);
            opacity: 1;
        }

        .open-slide .slide-link {
            display: block;
            border-radius: 10px;
            overflow: hidden;
        }
        .open-slide .slide-link img {
            display: block;
            width: 100%;
        }

        .open-slide .swiper-pagination {
            bottom:30px;
            z-index: 10;
        }

    </style>
</head>
<body>
    <h2>오픈매장소개</h2>
    <div class="open-slide">
        <!-- swiper start -->
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" class="slide-link">
                        <img src="lg2/01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slide-link">
                        <img src="lg2/02.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slide-link">
                        <img src="lg2/03.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slide-link">
                        <img src="lg2/04.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slide-link">
                        <img src="lg2/05.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slide-link">
                        <img src="lg2/06.jpg" alt="">
                    </a>
                </div>
            </div><!-- wrapper end -->
            <!-- page navigation -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- swiper end -->
    </div>


    <script src="swiper/swiper-bundle.min.js"></script>
    <script>

        // swiper01
        let swiper01 = new Swiper('.swiper01', {
            loop : true,
            slidesPerView : 1.5,
            centeredSlides : true,
            spaceBetween : 10,
            pagination : {
                el : '.swiper-pagination',
                clickable : true,
            }
        });

    </script>
 
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>

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

        h2 {
            font-size: 45px;
            line-height: 100px;
            text-align: center;
            background: #eee;
        }

        .banner {
            width: 100%;
            border-bottom: 10px solid #000;
        }

        .banner .swiper-slide .img-link {
            display: block;
        }
        .banner .swiper-slide .img-link img {
            display: block;
            width: 100%;
        }

        .banner .navi-box {
            position: absolute;
            left:50%; top:275px;
            transform: translateX(490px);
            background:#fff;
            border: 1px solid #000;
            height: 40px;
            border-radius: 20px;
            z-index: 10;
            display: flex;
            align-items: center;
            padding: 0 20px;
            gap:10px;
        }
        .banner .navi-box > * {
            flex:none;
        }
        .banner .navi-box > a {
            width: 24px;
            height: 24px;
            text-indent: -9999px;
            background-color: #0f0;          
        }

        .banner .navi-box > a::before {
            clip-path: polygon(0 0, 100 50, 0 100);
        }


        .banner .navi-box .prev-btn {
            position: relative;
        }
        .banner .navi-box .prev-btn::before {
            content: '';
            width: 1px;
            height: 18px;
            background: #999;
            position: absolute;
            right:-5px; top:50%;
            transform: translateY(-50%);
        }


        .banner .navi-box .swiper-pagination {
            position: static; /* 포지션 기본값 */
            width: auto;
        }
        .banner .navi-box .swiper-pagination .swiper-pagination-current {
            font-weight: bold;
        }

        .banner1 {
            width: 100%;
        }

        .banner1 img {
            display: block;
            width: 100%;
        }

        .banner1 .swiper-pagination-bullet {
            width: 15px;
            height: 15px;
            border-radius: calc(15px/2);
            transition: width 0.3s ease-in-out;
        }

        .banner1 .swiper-pagination-bullet-active {
            width: 100px;
            
        }

    </style>
 
<body>
    <h2>LiveAll 메인배너</h2>
    <div class="banner">
        <div class="swiper swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_02.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_03.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_04.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_05.jpg" alt="">
                    </a>
                </div>
            </div><!-- swiper wrapper end -->
            <!-- 네비게이션 영역 만들기 -->
            <div class="navi-box">
                <div class="swiper-pagination"></div>
                <a href="#" class="prev-btn">이전보기</a>
                <a href="#" class="next-btn">다음보기</a>
            </div>
        </div><!-- swiper end -->
    </div>

    <h2>페이지네이션 애니메이션만들기</h2>
    <div class="banner1">
        <div class="swiper swiper02">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="img-link">
                        <img src="liveall/main_01.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="swiper-pagination">

            </div>
        </div>
    </div>

    <script src="swiper/swiper-bundle.min.js"></script>
    <script>

        // swiper01
        let swiper01 = new Swiper('.swiper01',{
            // 옵션작성하기
            pagination : {
                el : '.swiper-pagination',
                type : 'fraction',
            },
            navigation : {
                prevEl : '.prev-btn',
                nextEl : '.next-btn',
            },
        });

        // swipre02
        let swiper02 = new Swiper('.swiper02',{
            pagination : {
                el : '.swiper-pagination',
                clickable : true,

            }
        });

    </script>
 

 

 

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

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

자바스크립트 javascript 12. scroll eventjquery 기반 scrollTop() , offset, jQueury animate(), 매개변수활용하기 (1)  (0) 2023.04.13
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(4) swiper 자바스크립트 애니메이션, 수정하기  (0) 2023.04.13
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2)  (0) 2023.04.10
자바스크립트 javascript 11. OOP 객체지향프로그래밍  (0) 2023.04.10
자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!  (0) 2023.04.07

관련글

댓글

티스토리툴바