如何将.load(）与flex滑块一起使用

How do I use .load() with flexslider

本文关键字：一起 flex load      更新时间：2023-09-26

我正试图使用.load（）将内容加载到滑块中，但我似乎无法使其顺利工作-使用下面的代码，一旦单击链接，内容就会淡出，页脚就会弹出以填充淡出内容的空间，然后是有趣的双闪内容，最后加载内容。

我想要的功能是：点击时，获取URL（通过选择器获取内容）将#滑块动画化到页面顶部，淡出#滑块，将内容加载到其中，然后将#滑块淡出，以避免滑块淡出时页脚跳起来。

我的标记：

<div id="slider">
    <div class="flexslider">
      IMAGES / CONTENT
    </div>
</div>

和jQuery迄今为止的

//Slider
$('a.test').click(function() {
    var address = $(this).attr('href');
    $('html,body').animate({
            scrollTop: $('#slider').offset().top
        }, 500, function() {
            $('#slider').animate({opacity: 0}, function(){
                $('.flexslider').load(address + ' .flexslider', function(){
                $('.flexslider').flexslider({
                animation: 'slide',
                smoothHeight: true,
            });
            }, function(){
                $('#slider').animate({opacity: 1});
            });
        });
    });
    return false;
});

设法使其工作得很好。只需要添加一个额外的div和下面的jquery。

$('a.test').click(function() {
    var address = $(this).attr('href');
    var slider_outer = $('#slider');
    var loadarea = $('#slider-inner');
    var current_height = slider_outer.innerHeight();
    slider_outer.css({
        "height": (current_height)
    });
    slider_outer.addClass('spinner');
    $('html,body').animate({
        scrollTop: slider_outer.offset().top
    }, 200, function() {
        loadarea.animate({
            opacity: 0,
            display: 'block',
            visibility: 'hidden'
        }, 500, function() {
            loadarea.load(address + ' .flexslider', function() {
                $(this).animate({
                    opacity: 1.0
                }, 500, function()
                          slider_outer.removeClass('spinner');
                          $('.flexslider').flexslider({
                        animation: 'slide',
                        smoothHeight: true,
                        easing: 'swing',
                        animationSpeed: 500,
                        slideshowSpeed: 10000,
                        touch: true,
                        prevText: '',
                        nextText: '',
                        start: function(slider) {
                            $('.flex-control-nav').fadeIn(500);
                            $('.total-slides').text(slider.count);
                            $('.current-slide').text(slider.currentSlide + 1);
                            slider_outer.removeAttr('style');
                        },
                        after: function(slider) {
                            $('.current-slide').text(slider.currentSlide + 1);
                        }
                    });
                });
            });
        });
    });
    return false;
});

和html

<div id="slider">
   <div id="slider-inner">
        <div class="flexslider">
          IMAGES / CONTENT
        </div>
    </div>
</div>

我希望它更流畅，所以如果有人能看到更好/更流畅的方法，那就太好了。我会尝试为谷歌员工制作一个演示。

相关文章：