Question

我的bxslider旁边有一个菜单可以滑入和滑出。因此我的滑块将自己调整大小。当我这样做时，bxslider要么隐藏我的部分图像，要么已经显示下一张幻灯片的部分内容。

我通过销毁和重新加载滑块解决了这个问题。我需要等到css转换完成，否则它不起作用但现在看起来很奇怪。我的问题还有其他解决办法吗？

编辑：当你用响应式滑块调整窗口大小时，我也希望它看起来像。所以没有跳跃过渡。

<section id="work">
<div id="navigation" class="hidden"> 
    <a href="javascript:;" id="menu-btn" class="menu-btn"><span></span></a>

    <ul class="main">
        <li><a data-slide-index="2">men1</a>

            <ul class="sub1">
                <li><a data-slide-index="1">men2.1</a>

                    <ul class="sub2">
                        <li><a data-slide-index="1">men2.1.1</a>

                        </li>
                        <li><a data-slide-index="2">men2.1.2</a>

                        </li>
                        <li><a data-slide-index="0">men2.1.3</a>

                        </li>
                    </ul>
                </li>
                <li><a data-slide-index="1">men2.2</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
<div id="slider" class="full">
    <div class="gallery">
        <ul class="bxslider">
            <li>
                <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/houses.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
            </li>
            <li>
                <img src="http://bxslider.com/images/730_200/trees.jpg" />
            </li>
        </ul>
    </div>
</div>
</section>

到目前为止，这是我的解决方案：

 $(document).ready(function () {
 var slider = $('.bxslider').bxSlider({
     pagerCustom: '#navi',
 });

 $('#menu-btn').click(function () {
     $('#navigation').toggleClass('visible');
     $('#navigation').toggleClass('hidden');
     $('#slider').toggleClass('resized');
     $('#slider').toggleClass('full');
     setTimeout(function () {
         slider.destroySlider();
         slider.reloadSlider();
     }, 500);

 });

});

谢谢你的帮助！

Answer 1

JSFiddle不会为我加载atm。但我认为这应该可以完成这项任务：

    $('#slider')
            .toggleClass('resized')
            .toggleClass('full')
            .on('oanimationend animationend webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd mozAnimationEnd MSAnimationEnd',function(){
        slider.destroySlider();
        slider.reloadSlider();
    })

在动画的DOM对象上运行.on（'...'）事件监听器（在你的情况下它是$（'＃slider'）我相信）

Answer 2

jsfiddle

 $(document).ready(function () {
 var slider = $('.bxslider').bxSlider({
     pagerCustom: '#navi'
 });

 $('#menu-btn').click(function () {
     $('#navigation').toggleClass('visible');
     $('#navigation').toggleClass('hidden');
     $('#slider').toggleClass('resized');
     $('#slider').toggleClass('full');
     $('#navigation').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', 
         function(e) { slider.redrawSlider();
     });
 });

}）;

Answer 3

感谢jsfiddle。

我认为你不能这样做......你混合了两个不同且独立的概念：JS调整大小和CSS过渡。

你可以通过设置与css过渡时间相同的动画时间来实现同步（差），但这对我来说听起来不是一个好的解决方案。

我会删除css转换并使用完整的JS解决方案。当您手动调整窗口大小时，这看起来不太好，但当菜单出现/消失时，您最终可能会得到一个很好的大小调整动画...

bxslider改变宽度onclick

3 个答案: