http://sallypak.cafe24.com/hy2/sub_test.html

세로 슬라이드 이미지 크기가 다른데요.
왼쪽에 도트가 창크기 768로만 잡히는데요.

이미지 한장 지나갈때마다 나오게 하고 싶은데요.

어디를 고치면 될까요?

<style>
        html,
        body {
            position: relative;
            height: auto;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-slide:nth-child(1) {
          height:66.1458%;
        }

        .swiper-slide:nth-child(2) {
          height: 74.7395;
        }
        .swiper-slide:nth-child(3) {
          height:132.82%;
        }

        .swiper-slide:nth-child(4) {
          height: 128.125%;
        }
        .swiper-slide:nth-child(5) {
          height:84.9609%;
        }

        .swiper-slide:nth-child(6) {
          height: 58.3333%;
        }
        
    </style>

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

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            slidesPerView: 1,
            spaceBetween: 0,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    </script>