Question

我在试图创建垂直转盘的车把模板中遇到了一些bxSlider实现方面的问题。我等到窗口完全加载以调用滑块，但bxviewport似乎不计算高度。

问题是，当它移动一张幻灯片时，视口高度会降低到0.我认为这是由于使用模板添加html内容。 bxSlider可能比填充模板提供的内容更快地获得幻灯片的高度

<div class="tweetDeck"  >
                        <p style="text-align:center"><a href="#"><img width="30px" src="../images/twitter.png"></a>#topic</p>

                        <ul class="tweets">
                            <script id="tweets-template" type="text/x-handlebars-template">
                                {{#each this}}
                                <li class="vSlide" height="150px">

                                    <p>{{tweet}}<br/>
                                    {{author}}
                                </li>
                                {{/each}}
                            </script>


                        </ul>
                </div>
                <script>
                //This is where I call the slider

                $(window).bind('load',function(){

                    $('ul.tweets').bxSlider({
                    auto:false,
                    minSlides:3,
                    maxSlides:3, 
                    moveSlides:1,
                    mode:'vertical',
                    pager:false,
                    controls:true,
                    slideSelector:'li.vSlide',



                    });
                    //This code bellow is useless, it's overrided after the first slide 
                    $('.tweets').parent('.bx-viewport').css({
                        'height':500
                    })

                })


                </script>

正如我所说，输出结果是第一次移动后视口的高度值为0。我试过它没有模板，它工作正常。

以前有人试过这个吗？

谢谢！

Answer 1

<强>解

我终于用计时器解决了，检查了李的长度。一旦ul填充了模板，我就调用了滑块函数，bxSlider可以正确地完成它的大小数学运算。

 function checkFeedsTimer() {
                        var feeds = $('.tweets li').length;
                        console.log(feeds)
                        if (feeds > 0 ){
                            $('ul.tweets').bxSlider({
                                auto:false,
                                minSlides:3,
                                maxSlides:3, 
                                moveSlides:1,
                                mode:'vertical',
                                pager:false,
                                controls:true,
                                slideSelector:'li.vSlide',          
                            });

                        }else{
                            setTimeout(checkFeedsTimer, 500);
                        }

                    }

                    checkFeedsTimer();

把手模板和bxSlider

1 个答案: