jQuery 幻燈片外掛 owl_carousev1.31 使用
阿新 • • 發佈:2021-12-04
1、js檔案
2、程式碼
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <title>OwlCarousel</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Pragma" content="no-cache"/> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/> <meta http-equiv="Expires" content="0"/> <link th:href="@{/js/plugins/owl_carousel/css/owl.carousel.css}" rel="stylesheet"> <link th:href="@{/js/plugins/owl_carousel/css/animate.css}" rel="stylesheet"> <style type="text/css"> .container { width: 1903px; height: 600px; } .owl-carousel, .owl-wrapper-outer, .owl-wrapper, .owl-item { height: 100%; } .owl-item { background-color: lightgray; padding-top: 2%; } .item { background-color: lightcoral; } </style> <body> <div id="show" class="container"> <div id="owl_demo" class="owl-carousel" style="height: 100%"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> <div class="item">12</div> <div class="item">13</div> <div class="item">14</div> <div class="item">15</div> </div> </div> <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script> <script type="text/javascript" th:src="@{/js/plugins/owl_carousel/js/owl.carousel.js}"></script> <script type="text/javascript"> $('document').ready(function () { // jQuery OwlCarousel v1.31 需要加英文冒號 $('#owl_demo').owlCarousel({ 'items': 4, 'autoPlay': 2000, 'smartSpeed': 2000, //切換速度 // 'scrollPerPage': true, 'stopOnHover': true, 'pagination': false, 'paginationNumbers': true, 'dots': false,//顯隱導行 'nav': false, //顯示左右箭頭 'navText': false, //左右箭頭html // navText: ['<span class="iconfont icon-xiangshang"></span>', '<span class="iconfont icon-xiangshang"></span>'],//左右箭頭內容 'loop': true,//迴圈輪播 'autoplayHoverPause': true,//滑鼠懸停停止自動播放 'margin': 10, //輪播專案之間的邊距 }); }) </script> </body> </html>