Question

我正在尝试在riotjs应用程序中实现flexslider。滑块工作正常但是当我为滑块设置自定义项目宽度时，它没有。根据文档，它应该有用。

self.on('updated', function(){
    $('.flexslider').flexslider({
    animation: "slide",
//                itemWidth: 210,
//                itemMargin: 5,
            controlsContainer: ".flex-container",
            start: function (slider) {
            $('.total-slides').text(slider.count);
            },
            after: function (slider) {
            $('.current-slide').text(slider.currentSlide);
            }
    });
});

暴乱成分：

<rsc-component id="dropBox" class="mybox col-lg-12">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="../images/slide1.jpg" alt=""/>
            </li>
            <li>
                <img src="../images/slide2.png" alt=""/>
            </li>
       </ul>
  </div>
</rsc-component>

Answer 1

为flexslider提供一个名称，并在内部引用它，而不是使用jquery来搜索它。

<rsc-component id="dropBox" class="mybox col-lg-12">
  <div class="flexslider" name="flexslider">
    <ul class="slides">...</ul>
  </div>
<script>
...
//store reference to flexslider 
this.on('mount',function(){
this.$flexslider = $(this.flexslider); // from the name property in template
});

this.on('updated',function(){
 // I would have at a guess that the flexslider needs to recalc itself, so 
 // destroy it and regenerate.
 this.$flexslider.detach().flexslider({...})
}); 

</script>
</rsc-component>

flexslider项目宽度不适用于riotjs

1 个答案: