Question

我使用caroufredsel创建产品滑块。我有这个代码

 $(document).ready(function(){
    if ($('body').attr('id') === 'index') {
    $('#mycarousel').carouFredSel({
        circular: false,
        infinite: false,
        auto: false,
        width: "200%",
        align: "left",
        prev : ".mycarousel-prev",
        next : ".mycarousel-next",
        responsive:true,
        easing: "easeOutBounce",
        items: {width: "auto",visible: {min:1, max:4}},
        swipe: true,
        scroll : {
          items : 2
        }
    });

  $("#mycarousel").touchwipe({
        preventDefaultEvents: false,
        wipeLeft: function() {
          $('#mycarousel').trigger('next', 2);
          return false;
        },
        wipeRight: function() {
          $('#mycarousel').trigger('prev', 2);
          return false;
        }
      });


};
});

现在我需要更改要滚动的项目数量（＆＃34;项目：2＆＃34;在caroufredsel功能和＆＃39; next＆＃39;，2或＆＃39; prev＆＃39;，2 in touchwipe）从2号到特定号码，具体取决于我对每个媒体查询的布局。

所以我必须得到布局的宽度：

var windowsize = $('#header .nav > .container').width();

然后制作一些if语句，例如

if (windowsize < 720) {
      var passItems = 1;
    } else if (windowsize > 720) {
    var passItems = 3;
   }

我知道我应该创建一些函数，它会为每个宽度返回正确数量的项目，然后在脚本中将此数字用作变量。我只是不知道如何正确编写这个js代码（在js中不太好）所以它也适用于调整大小，而不会重复代码太多次。任何js大师都可以帮忙吗？： - ）

由于

Answer 1

尝试将您的代码放在此事件处理程序中（需要jQuery）

window.addEventListener('resize', function(event){
  var windowsize = $('#header .nav > .container').width();
  if (windowsize < 720) {
    var passItems = 1;
  } else if (windowsize > 720) {
    var passItems = 3;
  }
};

参见示例jsfiddle

Answer 2

为什么不尝试自适应幻灯片，如猫头鹰响应幻灯片。链接如下：

Owl Responsive Slide

Answer 3

你可以使用http://wicky.nillia.ms/enquire.js我非常满意地使用它，一个使用宽度作为提示的例子

   enquire.register("screen and (min-width: 45em)", {

        deferSetup : true,
        setup : function() {
            // load content via AJAX
        },
        match : function() {
            // show sidebar
        },
        unmatch : function() {
            // hide sidebar
        }  

    });

基于浏览器/设备宽度的变量

3 个答案: