弹性滑块方向箭头响应

flexslider direction arrows responsive

本文关键字：响应 方向      更新时间：2023-09-26

我目前正在尝试在全角和某个断点处使用柔性滑块，我希望方向箭头放在滑块下方以供移动使用。然后，我将在此处使用文本按钮来移动滑块。

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

以前有没有人这样做过可以帮助我？

基本上尝试使用此处的基本滑块作为我的全屏滑块，并将其与移动滑块的基本滑块自定义方向导航相结合。

这个用于全宽 

<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>

您可以使用 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")
        });
    }
});
相关文章：