博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flexslider 使用方式
阅读量:6361 次
发布时间:2019-06-23

本文共 1479 字,大约阅读时间需要 4 分钟。

hot3.png

官网(http://flexslider.woothemes.com/carousel-min-max.html)的例子中没说明哪些是必要的代码,哪些是不用的,所以让我一开始想使用的时候,不知如何开始。
现在搞得差不多清楚了:
1.只用载入一个Js文件;<script type="text/javascript" src="jquery.flexslider-min.js"></script>
2.html的必要结构如下:
<div class="slider-wrapper flexslider ">//外层是用来放在Jquery参数里面的
                        <div class="slider-content slides">//这个slides类是必须的,但是不一定要ul标签
                            <li class="image">//这个li标签一定是必须的
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                            <li class="image">
                                <img src="./images/examples/home/new/home-slider-new-01.jpg">
                            </li>
                           
                        </div>
                    </div>
3.js部分
(function($) {
$(function() {
 $('.flexslider').flexslider({
    animation: "slide",
 animationLoop: true,
    itemWidth: 150,
    itemMargin: 10
  });
4.自定义导航按钮:
 $('.arrow.left').click(function(){
  $('.flex-prev').click();
  });
  $('.arrow.right').click(function(){
  $('.flex-next').click();
  });

转载于:https://my.oschina.net/qiujumper/blog/170507

你可能感兴趣的文章
Optional
查看>>
sed 命令编辑文本
查看>>
Activity调用isDestroyed()方法报出,java.lang.NoSuchMethodError
查看>>
Keepalived详解(四):通过vrrp_script实现对集群资源的监控【转】
查看>>
CollapsingToolbarLayoutDemo【可折叠式标题栏,顺便带有CardView卡片式布局】
查看>>
CentOS7.4安装配置mysql5.7 TAR免安装版
查看>>
解决IE二级链接无法打开故障
查看>>
Windows phone应用开发[16]-数据加密
查看>>
通用数据压缩算法简介
查看>>
The next Industry Standard in IT Monitoring, a python implementation Nagios like tool --- Shinken
查看>>
(笔记)找工作,该怎么进补
查看>>
div的显示和隐藏以及点击图标的更改
查看>>
(轉貼) Ubuntu將在ARM平台netbook上現身 (SOC) (News) (Linux) (Ubuntu)
查看>>
SQL注入测试工具:Pangolin(穿山甲)
查看>>
在html 的img属性里只显示图片的部分区域(矩形,给出开始点和结束点),其他部份不显示,也不要拉伸...
查看>>
程序员第二定律:量化管理在程序员身上永无可能
查看>>
ubuntu一些脚本的执行顺序
查看>>
类继承的结构
查看>>
Intel 被 ARM 逼急了
查看>>
testng + reportng 测试结果邮件发送
查看>>