Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Swiper demo</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
- <!-- Link Swiper's CSS -->
- <link rel="stylesheet" href="../dist/css/swiper.min.css">
- <!-- Demo styles -->
- <style>
- 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-container1 {
- width: 500px;
- height: 300px;
- }
- .swiper-container2 {
- width: 500px;
- height: 300px;
- }
- .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;
- }
- </style>
- </head>
- <body>
- <!-- Swiper -->
- <div class="swiper-container swiper-container1">
- <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 class="swiper-slide">Slide 5</div>
- <div class="swiper-slide">Slide 6</div>
- <div class="swiper-slide">Slide 7</div>
- <div class="swiper-slide">Slide 8</div>
- <div class="swiper-slide">Slide 9</div>
- <div class="swiper-slide">Slide 10</div>
- </div>
- </div>
- <!-- Add Arrows -->
- <div class="swiper-button-next works-button-next"></div>
- <div class="swiper-button-prev works-button-prev"></div>
- <br><br><br>
- <!-- Swiper2 -->
- <div class="swiper-container swiper-container2">
- <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 class="swiper-slide">Slide 5</div>
- <div class="swiper-slide">Slide 6</div>
- <div class="swiper-slide">Slide 7</div>
- <div class="swiper-slide">Slide 8</div>
- <div class="swiper-slide">Slide 9</div>
- <div class="swiper-slide">Slide 10</div>
- </div>
- </div>
- <!-- Swiper JS -->
- <script src="../dist/js/swiper.min.js"></script>
- <!-- Initialize Swiper -->
- <script>
- var swiper = new Swiper('.swiper-container1', {
- navigation: {
- nextEl: '.works-button-next',
- prevEl: '.works-button-prev',
- },
- });
- var swiper = new Swiper('.swiper-container2', {
- effect: 'fade',
- navigation: {
- nextEl: '.works-button-next',
- prevEl: '.works-button-prev',
- },
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement