响应式flexslider与自定义directionNav

Question

将flexslider应用于动态添加的图像到幻灯片。 这是flexslider代码

var divApps = "<li class=\"col-sm-3\">";
divApps = divApps.concat(Content);
divApps = divApps.concat("</li>");

$("ul.slides").append(divApps);


$('.flexslider').flexslider({
            selector: "ul.slides > li",
            animation: "slide",
            animationLoop: false,
            reverse: false,
            slideshow: false,
            controlNav: false,
            directionNav: true,
            prevText: "Previous",
            nextText: "Next",
            minItems: 6,
            startAt: 0,
            itemWidth: 180,
            itemMargin: 10,
            move:1,
            touch: true,
            controlsContainer: '.flex-container',
            useCSS: true,
            before: function(slider){
                $('.current-slide').text(slider.currentSlide);
            },
            start: function(slider){
                $('.total-slides').text(slider.count);
            },
            after: function(slider){
                $('.current-slide').text(slider.currentSlide);
            },
            end: function(slider){                  
                slider.flexAnimate(0);
                $('.current-slide').flexslider("stop")
            }
        });

flexslider插件未使用上面的js代码设置。这是我用萤火虫检查Element时得到的......

<ul class="slides" style="width: 0%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
    <li class="col-sm-3">
        Content
    </li>
</ul>

这是我的HTML代码

<div class="slider">
    <div class="col-xs-12">
         <div class="flexslider">
              <ul class="slides">

              </ul>
         </div>
    </div>
</div>

请帮帮我。