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

如何理解基于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>

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