jquery - 在移动设备上仅显示和下载来自 Flexslider 的第一张图片

Question

我正在尝试找出一种方法，以编程方式在我的网站上的小视口(viewport)上仅显示每个幻灯片的第一张图片 - 比如小于 640 像素。我总共有大约 20 个不同的幻灯片，所以我想弄清楚如何在整个站点范围内进行此操作。我尝试了几种不同的 CSS 方式，比如将除 firstchild 之外的所有 li 设置为显示:无 - 但问题是图像仍然会加载，所以它有点违背了为移动设备提供轻量级版本的目的。我想我可以直接杀死 flexslider，然后进去并添加一个新的 div，其中包含一张我想要的图像，它只显示在移动设备上，但这看起来像一个巨大的 PITA。

有人能指出我正确的方向吗？我想它必须是 jQuery 的东西，但我什至不知道从哪里开始，我不想开始摆弄 jquery.flexslider.js 而最终完全破坏它。

Answer 1

好吧，似乎没有其他人也知道该怎么做。只是想我会发布我的解决方案，以防它帮助别人。你需要使用 modernizr 来实现这一点，并在你想要保留的幻灯片的 li 中添加一个 class="keep"。

<script type="text/javascript">
//shows only 1st image from flexslider on mobile
if (Modernizr.mq('(max-width: 767px)')) {
    $(".flexslider li:not(.keep)").remove();
    $( ".flexslider" ).removeClass( "flexslider" ).addClass( "noslider" );
} else {
    //these are my flexslider settings, use yours
    $(window).load(function(){
    $('.flexslider').flexslider({
        animation: "fade", 
        animationSpeed: 3500,
        directionNav: false,
        controlNav: false,
        smoothHeight: false,
        slideshow: false,
        useCss: false,
        start: function(slider){
        $('body').removeClass('loading');
       }
     });
 });
}
</script>

然后只需将 .keep 和 .noslider 的样式添加到您的 css!