| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.min.js" | |
| integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| <script src="main.js"></script> | |
| </head> | |
| <body> | |
| <!-- Swiper --> | |
| <div class="swiper-container"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide">Slide 1</div> | |
| <div class="swiper-slide">Slide 2</div> | |
| <div class="swiper-slide">Slide 3</div> | |
| <div class="swiper-slide">Slide 4</div> | |
| </div> | |
| <!-- Add Pagination --> | |
| <div class="swiper-pagination"></div> | |
| <!-- Add Arrows --> | |
| <div class="swiper-button-next"></div> | |
| <div class="swiper-button-prev"></div> | |
| </div> | |
| </body> | |
| </html> |
| 'use strict'; | |
| let actions = []; | |
| $(() => { | |
| let swiper = new Swiper('.swiper-container', { | |
| pagination: { | |
| el: '.swiper-pagination', | |
| type: 'progressbar', | |
| }, | |
| navigation: { | |
| nextEl: '.swiper-button-next', | |
| prevEl: '.swiper-button-prev', | |
| }, | |
| on: { | |
| slideChange: () => { | |
| let action = {index: swiper.activeIndex, timestamp: new Date()}; | |
| actions.push(action); | |
| console.log(action); | |
| } | |
| } | |
| }); | |
| }); |
| html, body { | |
| position: relative; | |
| height: 100%; | |
| } | |
| body { | |
| background: #eee; | |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
| font-size: 14px; | |
| color:#000; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .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; | |
| } |