<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/swiper-bundle.min.css"> </head> <body> <div class="swiper-container" style="width: 1420px;margin: 0 auto"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="images/ad_01.jpg" width="1420" height="1479" /> </div> <div class="swiper-slide"> <img src="images/ad_02.jpg" width="1420" height="1479" /> </div> <div class="swiper-slide"> <img src="images/ad_03.jpg" width="1420" height="1479" /> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <script src="js/swiper-bundle.min.js" type="text/javascript"></script> <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html>