Question

由于在使用Slimmage设置的Umbraco中运行出色的FlexSlider时遇到问题，我不得不用BXSlider替换它。这个滑块在我看来并不是很好，并且如果在较小的屏幕上或者如果你减小了浏览器的大小，它会产生一些非常奇怪的东西。它将在载入时跳过两个幻灯片，然后一旦它绕过一次，它将反转几个幻灯片然后前进一个然后再次反转，完全随机，完全不是所需的。以下是我正在使用的实现。任何人都可以发现任何错误或建议一个适用于Slimmage的好滑块吗？

使用BxSlider v4.1.2，JQuery v2.1.1和Bootstrap v3.2.0

HTML

                <div class="row">
                                <div class="slider">
                  <ul class="bxSlider">
   <li>   
                                    <noscript data-slimmage="true" data-img-src="/media/1001/tigh-ruaraidh-1.jpg?center=0.52709359605911332,0.49&amp;mode=crop&amp;quality=90&amp;width=984&amp;heightratio=0.4634146341463414634146341463&amp;format=jpg&amp;slimmage=true&amp;rnd=130544148660000000" data-img-alt="Where time stands still"><img src="/media/1001/tigh-ruaraidh-1.jpg?center=0.52709359605911332,0.49&amp;mode=crop&amp;quality=90&amp;width=984&amp;heightratio=0.4634146341463414634146341463&amp;format=jpg&amp;slimmage=true&amp;rnd=130544148660000000" alt="Where time stands still"></noscript>
                                    <div class="sliderCaption">Where time stands still</div>   
                                </li>
   <li>   
                                    <noscript data-slimmage="true" data-img-src="/media/1002/tigh-ruaraih-from-garden.jpg?crop=0,0.017543859649122806,0,0.0678219940094138&amp;cropmode=percentage&amp;quality=90&amp;width=984&amp;heightratio=0.4634146341463414634146341463&amp;format=jpg&amp;slimmage=true&amp;rnd=130548450510000000" data-img-alt="Paradise in Scotland"><img src="/media/1002/tigh-ruaraih-from-garden.jpg?crop=0,0.017543859649122806,0,0.0678219940094138&amp;cropmode=percentage&amp;quality=90&amp;width=984&amp;heightratio=0.4634146341463414634146341463&amp;format=jpg&amp;slimmage=true&amp;rnd=130548450510000000" alt="Paradise in Scotland"></noscript>
                                    <div class="sliderCaption">Paradise in Scotland</div>   
                                </li>
   <li>   
                                    <noscript data-slimmage="true" data-img-src="/media/1017/applecross-bay-from-applecross-river-2.jpg?anchor=center&amp;mode=crop&amp;quality=90&amp;width=984&amp;heightratio=0.4634146341463414634146341463&amp;format=jpg&amp;slimmage=true&amp;rnd=130548512660000000" data-img-alt="Applecross Bay from Applecross River - 2.jpg"><img src="/media/1017/applecross-bay-from-applecross-river-2.jpg?anchor=center&amp;mode=crop&amp;quality=90&amp;width=984&amp;heightratio=0.4634146341463414634146341463&amp;format=jpg&amp;slimmage=true&amp;rnd=130548512660000000" alt="Applecross Bay from Applecross River - 2.jpg"></noscript>
                                    <div class="sliderCaption">Applecross Bay from Applecross River - 2.jpg</div>   
                                </li>

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

JS

      $(function(){
        window.slimmage.readyCallback = function() {
        // Slider
            if($('.bxSlider').length > 0) {     
                $('.bxSlider').bxSlider({
                  mode: 'horizontal',
                  captions: false,
                  auto: true,
                  speed: 5000,
                  useCSS: true,
                  responsive: true,
                  controls: false,
                  infiniteLoop: true
                });
            }
        }
})

随机滑动控件的BxSlider实现问题

0 个答案: