2022-06-22 jQuery如何引入和使用外部插件(以轮拨图插件OwlCarousel2为例)

已于 2022-10-08 17:36:59 修改
阅读量170 收藏
点赞数
分类专栏： jQuery 知识点 文章标签： javascript jquery jq 插件 轮拨图
于 2022-06-22 21:37:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/125417217
版权
本文详细介绍了如何使用jQuery引入并应用OwlCarousel2插件创建轮播图。从下载插件到引入CSS和JS文件，再到设置HTML结构、调用插件及配置参数如显示图片数、自动轮播等，最后展示实现效果。
摘要由CSDN通过智能技术生成

文章目录

1.下载

下载地址1
下载地址2

2.打开readme.md文件

或阅读在线文档

3.引入外部css文件和js文件
3.1.引入两个css文件

在这里插入图片描述

3.2.引入一个js文件(放在引入jQuery的script标签之后)

在这里插入图片描述

4.引入HTML结构并改成自己的img标签

在这里插入图片描述

5.调用插件
$(document).ready(function(){
   
  $(".owl-carousel").owlCarousel();
});
6.设置相关参数
6.1.同时显示图片数

在这里插入图片描述

6.2.自动回到第一张/最后一张

在这里插入图片描述

6.3.自动轮拨

在这里插入图片描述

7.完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset</
最低0.47元/天 解锁文章
前端OnTheRun
关注
专栏目录
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器
zaichuanguanshui的专栏
10-19 7782
今天看到一个插件OWL Carousel幻灯片。一、首先是说明一下OWL Carousel幻灯的主要功能。1、Jquery插件，品牌好，哈哈。基于Jquery开发，比较稳定 2、文件小。Css+js不到10k，压缩之后。 3、支持触屏。经过测试，在android手机的主流浏览器：QQ、百度、UC、微信内置浏览器等支持 4、响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示 5
Owl Carousel 2强大的响应式jQuery旋转木马插件
souhugirl的专栏
02-17 1855
Owl Carousel 2是上一版Owl Carousel 1.x的升级版本。Owl Carousel 2是可以让你创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，有丰富的参数设置，甚至可以嵌入视频，功能十分强大。 Owl的新特性有： 可以无限循环项目可以居中显示灵活的速度控制多级别的padding设置项目间可以设置Margin使几乎所有的选项都具有响应能力多种宽度设置丰富
owlCarousel2学习
huangxiaonian的博客
06-05 884
//轮播 var owl = $('#test').owlCarousel({}); //切换后的函数 owl.on('changed.owl.carousel', function(event) { }); //切换时的函数 owl.on('change.owl.carousel', function() { }); $('#banner').owlCarousel({ //整数5幻灯片每页可见个数 items : 1, //分页 dots : true
owl carousel2 幻灯片/轮播插件
小利的博客
01-12 7973
官网：http://www.owlgraphic.com/owlcarousel/ Github地址：https://github.com/OwlCarousel2/OwlCarousel2 中文文档：http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html 在线示例：http://owlcarousel2.githu
owl carousel2滚动到指定位置遇到的问题记录
weixin_33881041的博客
04-12 879
2019独角兽企业重金招聘Python工程师标准>>> ...
owl-carousel2轮播图插件
DeBruyne的博客
04-29 1314
http://owlcarousel2.github.io/OwlCarousel2/
2022-06-23 轮播库swiper.js的引入和使用
GAARA
06-23 548
复习:引入和使用一个外部插件的流程 2022-06-22 jQuery如何引入和使用外部插件(以轮拨图插件OwlCarousel2为例) swiper.js介绍和下载 swiper是一款免费以及轻量级轮播滑动的js框架,是非常常用的轮播库 官网地址:swiper中文网 下载:swiper-8.3.0.zip 在线演示和使用导航(必看) 在线演示 使用方法 引入文件和DOM结构 需要引入的css文件和js文件 ...
jquery 教程及很多的插件
11-16
6. **轮播图插件**: 如 Owl Carousel，支持触摸滑动，适用于移动设备。 7. **日期时间插件**: 如 jQuery UI Datepicker 或 Pickadate.js，为网站添加美观易用的日历选择器。 8. **图片懒加载插件**: 如 Lazy Load ...
owl 轮播_如何使用Owl.js构建全屏响应式轮播滑块
Web design 教程小屋
07-10 2922
在上一篇文章中，我向您展示了如何使用slick.js构建自定义图像库。 今天，我将介绍使用owl.js （或“ Owl Carousel”）创建动画，响应式，全屏轮播滑块的过程 。 像往常一样，要初步了解我们将要构建的内容，请看一下相关的CodePen演示（请查看较大的版本以获得更好的体验）： 什么是猫头鹰轮播？ Owl.js是由David Deutch创建的流行的jQuery插件，可...
jQuery幻灯片插件owlcarousel参数说明中文文档
10-18
jQuery幻灯片插件owlcarousel是一个小巧强大兼容性强的幻灯片插件，兼容IE6以上所有浏览器，本文主要介绍了字的使用方法与中文参数与API说明
OwlCarousel2：不推荐使用的jQuery响应式轮播
02-20
是的，这太漂亮了，您是否自己并切换到 猫头鹰轮播2 启用触摸功能的插件，可让您创建美观，响应Swift的轮播滑块。 要开始使用，请查看 。 注意：不再使用旧的Owl Carousel网站（owlgraphic [dot] com）。 请删除书签和您自己产品的文档中对此内容的所有引用，因为它们被用于恶意目的。 快速开始 安装 该软件包可以通过以下方式安装： ： npm install --save owl.carousel或yarn add owl.carousel jquery ： bower install --save owl.carousel 或下载。 加载 Webpack 通过“ webpack.ProvidePlugin”将jQuery添加到您的webpack配置中： const webpack = require('webpack'); //... plugin
前端项目-OwlCarousel2.zip
09-02
前端项目-OwlCarousel2,触摸启用jquery插件，让您创建美丽的反应转盘滑块。
owlCarousel
u012171227的专栏
07-22 2603
简介 Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点： 兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度…… Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。 兼容
owl-carousel轮播插件的使用
weixin_43943967的博客
04-17 4590
官方链接：点击进入 1.下载demo； 只需要dist目录即可； 页面中引入css 页面中引入js 很好用的轮播组件库；值得推荐
Owl Carousel幻灯片插件的使用
weixin_30561177的博客
06-22 457
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点： 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 你为什么使用这个插件呢？ 1，兼容所有浏览器，包括IE6,7哦 2，支持移动端，可触摸滑动来执行事...
owlCarousel 用法心得2
weixin_34342905的博客
06-28 494
自定义区间： 'itemsCustom':[[0,2],[ 400,3 ],[ 700,3 ],[ 1200,4 ],[ 1551,5 ],[ 1831,6 ]] 大于1831显示6个， 1551-1830，显示5个， 1200-1550，显示4个， 。。。。。。以此类推 转载于:https://www.cnblogs.com/ghfjj/p/7090619.html...
新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效
weixin_39928461的博客
06-10 562
这是一款基于owl-carousel的卡片水平轮播展示特效。该卡片轮播展示特效可以通过前后导航按钮来切换卡片，它是响应式设计，在手机等小屏幕设备上，会自动调节为只展示一个卡片。使用方法在页面中引入bootstrap.css和style.css文件，以及jquery和owl.carousel.min.css和owl.carousel.min.js文件。HTML结构该卡片水平轮播展示特效的基本的使用方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值