zoukankan      html  css  js  c++  java
  • jquery插件---slick插件(响应式幻灯片)

    转载来源:http://www.shejidaren.com/slick-slider.html

    使用参数:https://blog.csdn.net/cddcj/article/details/52172863 参考此网站

    出处:设计达人

    随着移动端的普及,为了能让访客方便查看网页内容,网页幻灯片效果(又称:灯箱,轮换图)也需要支持移动端,即响应式,当然再加上拖拽支持就更多好了,今天为大家分享一个实用的幻灯片 jQuery 插件「Slick」,几乎能满足大部分网页的需求。

    Slick 这个插件功能多且实用,下面我们一起来看看介绍。

     jQuery 名称:Slick
    下载&演示:http://kenwheeler.github.io/slick/

    1.多组切换

    多组同时切换,如下图,第一屏是1,2,3图,点击下一屏按钮后,就直接切的到4,5,6屏了。

    2. 响应式兼容

    自适应这个需求是必须的了,看看效果,还不错呢。

    3. 单独固定幻灯片宽度

    可以为每个切的图像设置不同的宽度,即不统一宽度也可以哦!

    4. 自动高度

    高度适应,就是如果有多行文字时,不会因为默认高度而被隐藏掉。

    5. 居中模式

    居中显示模式,重点突出中间哪个图像。

    6. Lazy Loading (延迟加载模式)

    如 DEMO,首先前3张图是默认图片是加载完成的,后面第4张开始,需要切换的时候才加载,这样起到按需加载的优化效果。

    7. 自动播放

    可以设置第隔 xx 秒,自动切换。

    8. 渐变切换效果

    加入一些切的效果。

    9. 缩略图模式

    可以在大图下面加入缩略图,优点就是让用户预知下一张图的内容,有时真佩服创作这些幻灯片模式的前辈,想法很全面。

    10.拖拽切换

    用鼠标或手势都可以拖拽切换,这效果和 APP 一样啦,Cool~

    下图有错字,该 S 的百度五笔(切的 ->切的)sorry…

    今天就介绍到这里,转发、点赞随意……


    下面是我自己做的补充:修改按钮的颜色(官方给的是白色)

    <style>
            .slick-prev, .slick-next{width: 20px;}
            .slick-prev:before, .slick-next:before{color: #666;}/*修改按钮颜色*/
            .slick-prev{left:0;z-index: 666;}
            .slick-next{right:0;z-index: 666;}
    </style>
  • 相关阅读:
    PriorityQueue详解
    Queue介绍
    Dubbo面试踩坑
    Java中Integer和ThreadLocal
    Java中Deque特性及API
    由ubuntu装好想到的
    双系统试水上岸
    终于意识到BIM确实火了
    读阿里机器学习平台的一些总结
    继续ubuntu和遇到的easybcd的坑
  • 原文地址:https://www.cnblogs.com/moppet/p/12468223.html
Copyright © 2011-2022 走看看