Question

在我正在构建的着陆页上，我在该网站的桌面版本的3列中显示了3个推荐。在移动/小屏幕设备上，需要以幻灯片形式（一次一个）显示3个推荐。

我认为这个问题的一个很好的解决方案是使用Flexslider jQuery插件，我已经使用了多年并热爱。

我将推荐书放入Flexslider的列表项中，这一切都很好地作为幻灯片放映。现在，在768px及以上的分辨率下，我需要显示3个圆柱布局，这意味着要覆盖Flexsliders样式。我以为我可以用CSS做这件事，也许在这里或那里用一个强大的!important来覆盖布局但不幸的是这不起作用。由于Flexslider将宽度与javascript内联，我似乎无法覆盖它们，因此无法获得我想要的布局。

有没有人对此有任何想法？理想情况下，布局会随着浏览器调整大小而改变，这就是为什么我想在可能的情况下使用CSS。

此处参考是我的HTML：

<div class="flexslider" id="testimonials">
        <ul class="slides">
            <li>
                <blockquote>
                    <p>I'm losing over a pound a week. I don’t think about food, especially at snack time.</p>
                    <footer>
                        <p>Lorna, 41 <span>Lost 8lb, dropped 1 dress size</span></p>
                    </footer>
                </blockquote>
            </li>
            <li>
                <blockquote>
                    <p>I lost half a stone without dieting.</p>
                    <footer>
                        <p>Tina, 42 <span>Lost 6lb</span></p>
                    </footer>
                </blockquote>
            </li>
            <li>
                <blockquote>
                    <p>This really helps, because it means I get to eat what I want but just not as much of it!</p>
                    <footer>
                        <p>Imogen Thomas <span>Glamour model</span></p>
                    </footer>
                </blockquote>
            </li>
        </ul>
    </div>

我的Flexslider代码：

$(function(){
if($(".flexslider").length > 0) {
    $(".flexslider").addClass("loading");
    // Can also be used with $(document).ready()
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            slideshowSpeed: 10000,
            animationSpeed: 400,
            easing: "easeInQuad",
            controlNav: true,
            directionNav: false,
            useCSS: false,
            start: function(slider){
                $('.flexslider').removeClass('loading');
            }
        });
    });
}

}）;

谢谢，希望有人可以帮忙！ :) 史蒂夫

Answer 1

好的，我选择的解决方案是检查容器的宽度，如果它低于768像素的分辨率，则将flexslider的类添加到div。如果没有添加所有生成的flexslider内联样式，那么在类之上将不会添加允许CSS样式！

我在下面使用的代码，我的javascript知识非常少，所以我确信会有更好的方法来做到这一点 - 但希望有人发现它很有用：）

jQuery(document).ready(function($){
if ($(window).width() < 768) {
    $('#testimonials').addClass('flexslider');
}
});

$(function(){
if($(".flexslider").length > 0) {
    $(".flexslider").addClass("loading");
    // Can also be used with $(document).ready()
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            slideshowSpeed: 10000,
            animationSpeed: 400,
            easing: "easeInQuad",
            controlNav: true,
            directionNav: false,
            useCSS: false,
            start: function(slider){
                $('.flexslider').removeClass('loading');
            }
        });
    });
}
});

使用媒体查询禁用/覆盖flexslider？

1 个答案: