Question

我正试图找出一种方法，以编程方式显示我的网站上每个幻灯片中的第一张图像在小视口上 - 比如小于640px。我总共有大约20个不同的幻灯片，所以我想弄清楚如何在整个网站上做这个。我已经尝试了几种不同的CSS方式，比如将所有li设置为除了firstchild之外显示：none - 但问题是图像仍然被加载，所以它有点挫败了为移动设备提供轻量级版本的目的。我想我可以直接杀死flexslider，然后进入并添加一个新的div，我想要的一个图像只显示在手机上，但这看起来像一个巨大的PITA。

有人能指出我正确的方向吗？我想它必须是一个jQuery的东西，但我甚至不知道从哪里开始，我不想开始搞乱jquery.flexslider.js并最终完全打破它。

Answer 1

似乎没有其他人知道该做什么。只是想我会发布我的解决方案，以防它帮助其他人。你需要使用modernizr这样做，并添加一个类=＆＃34;保持＆＃34;你希望保留的幻灯片。

<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中即可！

展示＆amp;在移动设备上仅下载Flexslider的第一张图片

1 个答案: