otehuki

```
<!DOCTYPE html>
<html>
    <head>
        <!-- Font Awesome の CSS を読み込む -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
        <style>
            body {
                box-sizing: border-box;
                margin: 0;
                padding: 30px;
                height: 100vh;
            }
            .swiper {
                width: 800px;
                max-width: 100%;
            }
            .swiper-slide img {
                width: 100%;
                /* height: auto; */
            }
            .sub-swiper .swiper-slide img {
                height: 200px;
            }
            .sub-swiper .swiper-slide img:hover {
                cursor: pointer;
            }
            .swiper-stop-button,
            .swiper-next-button,
            .swiper-prev-button {
                /* background-color: #000000; */
                color: #000000;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

            .swiper-stop-button:hover,
            .swiper-next-button:hover,
            .swiper-prev-button:hover {
                background: rgba(0, 0, 0, 0.5);
            }
            .swiper-buttons {
                display: flex;
                justify-content: space-evenly;
                width: 400px;
                margin: 10px auto;
            }
        </style>
    </head>
    <body>
    <!-- Slider main container -->
    <div class="swiper main-swiper">
        <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <img src=".\img\mv_1_sp jpg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src=".\img\mv_2_sp jpg.jpg" alt="">
            </div>
        </div>
        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>

    </div>

    <div class="swiper swiper-buttons">
        <button class="swiper-prev-button"><i class="fas fa-chevron-left"></i></button>
        <button class="swiper-stop-button"><i class="fa fa-pause"></i></button>
        <button class="swiper-next-button"><i class="fas fa-chevron-right"></i></button>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const mainSwiper = new Swiper('.main-swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            speed: 1000,
            effect: 'fade',

            // If we need pagination
            // pagination: {
            //     el: '.swiper-pagination',
            //     type: 'bullets',
            //     clickable: true,
            // },

            scrollbar: {
                el:'.swiper-scrollbar',
                draggable: true,
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-next-button',
                prevEl: '.swiper-prev-button',
            },
            autoplay: {
                delay: 2000, 
            },
        });
        
        document.querySelector('.swiper-stop-button').addEventListener('click', function() {
    if (mainSwiper.autoplay.running) {
        mainSwiper.autoplay.stop();
        document.querySelector('.swiper-stop-button i').className = 'fas fa-play'; // 再生アイコン
    } else {
        mainSwiper.autoplay.start();
        document.querySelector('.swiper-stop-button i').className = 'fas fa-pause'; // 停止アイコン
    }
});

    </script>
    </body>
</html>
```