jQuery 幻灯片插件 OwlCarousel2-2.3.4 使用

作者 : admin 发布时间: 2022-08-17 文章热度:32 共2026个字,阅读需6分钟。 本文内容有更新 字体:
  • 文章介绍
  • 评价建议
  • 目 录

    1、js

    OwlCarousel2-2.3.4.zip 下载

    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/OwlCarousel2-2.3.4/dist/assets/owl.carousel.css}” rel=”stylesheet”>
    <link th:href=”@{/js/plugins/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css}” rel=”stylesheet”>
    <link th:href=”@{/js/plugins/OwlCarousel2-2.3.4/dist/assets/owl.theme.green.css}” rel=”stylesheet”>
    <link th:href=”@{/js/plugins/OwlCarousel2-2.3.4/dist/assets/style-red.css}” rel=”stylesheet”>
    <style type=”text/css”>
    .container {
    width: 1903px;
    height: 600px;
    }

    .owl-carousel, .owl-stage-outer, .owl-stage, .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/OwlCarousel2-2.3.4/dist/owl.carousel.js}”></script>
    <script type=”text/javascript”>
    $(‘document’).ready(function () {
    $(‘#owl_demo’).owlCarousel({
    items: 5,
    smartSpeed: 2000, //切换速度
    autoplay: true,//自动轮播
    autoplayTimeout: 2000,
    navText: false, //左右箭头html
    dots: false,//显隐导行
    nav: false, //显示左右箭头
    loop: true,//循环轮播
    // margin: 10, //轮播项目之间的边距
    // navText: [‘<span class=”iconfont icon-xiangshang”></span>’, ‘<span class=”iconfont icon-xiangshang”></span>’],//左右箭头内容
    autoplayHoverPause: true,//鼠标悬停停止自动播放
    });
    })
    </script>
    </body>
    </html>

    自动轮播

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

    发表评论

    1313+

    本站勉强运行

    2+

    用户总数

    93+

    资源总数

    0+

    今日更新

    2022-9-27

    最后更新时间