JS 前端框架笔记

 1 <div class="swiper-container">
 2         <div class="swiper-wrapper">
 3             <div class="swiper-slide">
 4                 <img src="../imges/lbt.jpg" alt="">
 5             </div>
 6             <div class="swiper-slide">
 7                 <img src="../imges/lbt2.jpg" alt="">
 8             </div>
 9             <div class="swiper-slide">
10                 <img src="../imges/lbt3.jpg" alt="">
11             </div>
12         </div>
13         <!-- Add Pagination -->
14         <div class="swiper-pagination"></div>
15         <!-- Add Arrows -->
16         <div class="swiper-button-next"></div>
17         <div class="swiper-button-prev"></div>
18     </div>

 1 .swiper-container {
 2             width: 100%;
 3             height: 100%;
 4 
 5         }
 6 
 7         .swiper-slide {
 8             text-align: center;
 9             font-size: 18px;
10             background: #fff;
11 
12             /* Center slide text vertically */
13             display: -webkit-box;
14             display: -ms-flexbox;
15             display: -webkit-flex;
16             display: flex;
17             -webkit-box-pack: center;
18             -ms-flex-pack: center;
19             -webkit-justify-content: center;
20             justify-content: center;
21             -webkit-box-align: center;
22             -ms-flex-align: center;
23             -webkit-align-items: center;
24             align-items: center;
25         }
26 
27         .swiper-pagination-bullet {
28             background-color: black !important;
29         }

 1 var swiper = new Swiper(‘.swiper-container‘, {
 2         spaceBetween: 30,
 3         centeredSlides: true,
 4         autoplay: {
 5             delay: 5000,
 6             disableOnInteraction: false,
 7         },
 8         pagination: {
 9             el: ‘.swiper-pagination‘,
10             clickable: true,
11         },
12         navigation: {
13             nextEl: ‘.swiper-button-next‘,
14             prevEl: ‘.swiper-button-prev‘,
15         },
16     });