<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
    
</head>
<body>
                
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2022/08/pink.webp" alt="pink.jpg"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2022/08/green.webp" alt="green.jpg"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2022/08/yellow.webp" alt="yellow.jpg"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2022/08/white.webp" alt="white.jpg"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2022/08/blue.webp" alt="blue.jpg"></div>
    </div>

    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
</body>
</html>
.swiper-container {
  width: 80%;
  height: 90vh;
  border: 4px solid black;
}
.swiper-container img {
  width: 100%;
  height: 100%;
}

.swiper-button-prev {
  background: url(https://malg7.com/wp-content/uploads/2022/08/arrow-left.png) no-repeat center !important;
  background-size: 25px 25px !important;
}

.swiper-button-next {
  background: url(https://malg7.com/wp-content/uploads/2022/08/arrow-right.png) no-repeat center !important;
  background-size: 25px 25px !important;
}
$(function() {
    let swiper = new Swiper('.swiper-container', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        loop: true,
        autoplay: true,
        speed: 3000,

        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.