<!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/2019/06/color1_pink.png" alt="color1_pink.png"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2019/06/color2_green.png" alt="color2_green.png"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2019/06/color3_yellow.png" alt="color3_yellow.png"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2019/06/color4_purple.png" alt="color4_purple.png"></div>
        <div class="swiper-slide"><img src="https://malg7.com/wp-content/uploads/2019/06/color5_blue.png" alt="color5_blue.png"></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/2019/06/arrow_left.png) no-repeat center !important;
  background-size: 25px 25px !important;
}

.swiper-button-next {
  background: url(https://malg7.com/wp-content/uploads/2019/06/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.