flexslider 使用方式

2019独角兽企业重金招聘Python工程师标准>>>

官网（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