温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何理解基于jQuery 的幻灯片插件Slick js

发布时间:2021-11-11 09:43:46 来源:亿速云 阅读:228 作者:柒染 栏目:开发技术

如何理解基于jQuery 的幻灯片插件Slick js,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

  由于工作要将图片做成幻灯片样式,于是想到了JQuery插件slick,上网查了一下,一些效果用法实例特意在此记录下:slick是一个基于jQuery的幻灯片插件.

  Slick.js特点:

  支持响应式

  浏览器支持css3时,则使用css3过度/动画

  支持移动设备滑动

  支持桌面浏览器鼠标拖动

  支持循环

  支持左右控制

  支持动态添加、删除、过滤

  支持自动播放、圆点、箭头、回调等等

  Slick.js单个显示

  <!DOCTYPEhtml>

  <htmllang="zh-CN">

  <head>

  <metacharset="utf-8">

  <title>jQuery幻灯片插件slick演示</title>

   <linkrel="stylesheet"href="style/slick.css">

   <style>

    *{margin:0;padding:0;}

    .slick{width:600px;margin:0auto;}

    .slick-prev:before,.slick-next:before{position:absolute;left:0;top:1px;color:#ccc;}

    .slick-prev{left:-35px;}

    .slick-next{right:-35px;}

    .slick-dots{bottom:-35px;}

   </style>

  </head>

  <body>

  <h2>jQuery幻灯片插件slick演示-单个显示</h2>

   <divclass="slick">

  <div><imgsrc="images/1.jpg"alt=""></a></div>

  <div><imgsrc="images/2.jpg"alt=""></div>

  <div><imgsrc="images/3.jpg"alt=""></div>

  <div><imgsrc="images/4.jpg"alt=""></div>

  <div><imgsrc="images/5.jpg"alt=""></div>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI