jQuery 幻灯片插件 OwlCarousel2-2.3.4 使用

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>
posted @   一只桔子2233  阅读(576)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2020-12-02 Echarts图表 相关技术点
2018-12-02 10.3 .NET 3.5 中的扩展方法
点击右上角即可分享
微信分享提示