<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="swiper-4.1.6/dist/css/swiper.min.css"> <script src="swiper-4.1.6/dist/js/swiper.min.js"></script> <style> .swiper-container { width: 600px; height: 600px; } .swiper-slide{ heigth:40px; line-height:40px; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">孑影側枕床木，寒思凍徹身骨。</div> <div class="swiper-slide">擁衾難寐空屋，起衣溫酒一壺。</div> <div class="swiper-slide">北國夜無雪，念念藏紙雀。</div> <div class="swiper-slide">枯守孤盞燈，清坐又一更。</div> <div class="swiper-slide">昨冬初逢可憶，今朝苦等難遇。</div> <div class="swiper-slide">去日歡顏幾許？來年再會可期？</div> <div class="swiper-slide">北國夜無雪，隱隱懼相逢。</div> <div class="swiper-slide">寧負痴心某，獨熬愚情種。</div> <div class="swiper-slide">夕陽幾縷染雙眸，舊月一輪訴腸衷。</div> <div class="swiper-slide">聲色如彼化於風，形影似我遁無聲。</div> <div class="swiper-slide">北國夜無雪，隱隱懼相逢。</div> <div class="swiper-slide">寧負痴心某，獨熬愚情種。</div> <div class="swiper-slide">夕陽幾縷染雙眸，舊月一輪訴腸衷。</div> <div class="swiper-slide">聲色如彼化於風，形影似我遁無聲。</div> <div class="swiper-slide">北國夜無雪，疏疏門前路。</div> <div class="swiper-slide">子猶守歲燭，冷暖夢何苦。</div> </div> <!-- 如果需要分頁器 --> <!--<div class="swiper-pagination"></div>--> <!-- 如果需要導航按鈕 --> <!--<div class="swiper-button-prev"></div>--> <!--<div class="swiper-button-next"></div>--> <!-- 如果需要滾動條 --> <!--<div class="swiper-scrollbar"></div>--> </div> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切換選項 slidesPerView: 10, //同時顯示數量 默認1 loop: true, // 循環模式選項 // 如果需要分頁器 pagination: { el: '.swiper-pagination', }, // 如果需要前進后退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滾動條 scrollbar: { el: '.swiper-scrollbar', }, autoplay: { delay: 1000,//1秒切換一次 }, }) </script> </body> </html>