flexslider 使用方式

官网(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();
  });

你可能感兴趣的:(flexslider 使用方式)