<!-- slick slider start --> <div class="slider"> <div><img src="images/index/slider_bg1.jpg" alt="" width="100%"></div> <div><img src="images/index/slider_bg2.jpg" alt="" width="100%"></div> <div><img src="images/index/slider_bg3.jpg" alt="" width="100%"></div> </div> <!-- slick slider end -->
<!-- jquery 函式庫 --> <script src="js/jquery-3.3.1.min.js"></script> <!-- slick plugin start --> <link rel="stylesheet" href="js/slick-1.8.1/slick/slick.css"> <link rel="stylesheet" href="js/slick-1.8.1/slick/slick-theme.css"> <script src="js/slick-1.8.1/slick/slick.min.js"></script> <!-- slick plugin end -->
<script> $('.slider').slick(); </script>
<script>
$('.slider').slick({
autoplay: true,
autoplaySpeed: 4000
});
</script>
<!-- Slider main container --> <div class="swiper-container mySwiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img src="images/index/slider_bg1.jpg" alt="" width="100%"></div> <div class="swiper-slide"><img src="images/index/slider_bg2.jpg" alt="" width="100%"></div> <div class="swiper-slide"><img src="images/index/slider_bg3.jpg" alt="" width="100%"></div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> <!-- slick slider end -->
<!-- swiper plugin start --> <link rel="stylesheet" href="js/swiper/swiper-bundle.min.css"> <script src="js/swiper/swiper-bundle.min.js"></script> <!-- swiper plugin end -->
或是直接使用CDN
<!-- swiper plugin start --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- swiper plugin end -->
<script> var swiper = new Swiper(".mySwiper", { autoplay: { delay: 2500 }, // If we need Navigation arrows navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // If we need pagination pagination: { el: ".swiper-pagination", }, }); </script>