Question

我目前正试图在全宽度使用flexslider，在某个断点处，我希望方向箭头在滑块下面移动以供移动使用。然后我会在这里使用文本按钮来移动滑块。

我尝试了一些解决方案。创建了两个滑块：一个用于全宽度，一个用于移动。当它到达断点时我隐藏了全宽度的那个，但我似乎无法将这两个javascript组合起来使它工作。

之前是否有人这样做可以帮助我？

基本上尝试使用Basic Slider Here作为我的全屏滑块，并将其与我的移动滑块的Basic Slider customDirectionNav相结合。

这个用于全宽

<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
}); 
</script>

这个用于移动设备，底部带有方向箭头/文字

<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    customDirectionNav: $(".custom-navigation a")
  });
});
</script>

Answer 1

您可以使用Modernizr在不同的制动点激活脚本的不同实例。

例如：

$("body").each(function() {
    if (Modernizr.mq('only screen and (min-width: 750px)')) {
        // For full-width
        $('.flexslider').flexslider({
            animation: "slide"
        });
    } else {
        // For mobile
        $('.flexslider').flexslider({
            animation: "slide",
            customDirectionNav: $(".custom-navigation a")
        });
    }
});

flexslider方向箭头响应

1 个答案: