Jquery 如何滑动引导div'；屏幕外是什么？

将元素向右向左滑动，使最左边的项目（项目1）不可见，并在最右边显示另一个具有相同滑动效果的元素（项目5）

Div应该在大屏幕上左右滑动，在小屏幕上上上下滑动

这个问题的解决方案包括不是引导行的列的div

如果使用bootstrap的row-column使设计具有响应性，如何解决这个问题

编辑1：我想这样做，但当div是引导列时

编辑1.1：在使用引导时是否有可能实现所需的功能

$（文档）.ready（函数（）{
变量数组=[“第1项”、“第2项”、“第3项”、“第4项”、“第5项”、“第6项”、“第7项]；
//包含所有项的数组
$（“#left_btn”）。在（'click'，函数（e）上{
//将项目向左滑动，即通过将元素向右向左滑动使最左边的项目（项目1）不可见，并在最右边显示另一个具有相同滑动效果的元素（项目5）
});
$（“#right_btn”）。在（'click'，函数（e）上{
//左按钮的正反面
});
})

.col-sm-2{
左侧填充：15px；
右侧填充：15px；
}
.btn{
边缘顶部：30px；
边缘底部：30px；
}
.项目{
高度：100px；
边框：5px纯蓝色；
背景颜色：粉红色；
}

左移
项目1
项目2
项目3
项目4
右移

看起来您很难启动它。不幸的是，Bootstrap div并不是专门为此而设计的，但是这里有一个示例，它可以在屏幕上/屏幕下向右移动，而不需要使用Bootstrap。我相信你可以拿这个例子，从这里找出你需要做的事情

//配置框
$（'.spin图标'）。单击（函数（）{
$（'.theme配置框'）.toggleClass（'show'）；
});
/*控制框*/
.theme配置{
位置：绝对位置；
顶部：90px；
右：0；
溢出：隐藏；
}
.theme配置框{
右边距：-300px；
位置：相对位置；
z指数：2000；
过渡时间：0.8s；
}
.theme-config-box.show{
右边距：0；
}
.旋转图标{
背景：#1ab394；
位置：绝对位置；
填充：7px 10px 7px 13px；
边界半径：20px 0 0 20px；
字体大小：16px；
排名：0；
左：0；
宽度：40px；
颜色：#fff；
光标：指针；
}
.皮肤设置{
宽度：300px；
左边距：40px；
背景#f3f4；
}
.皮肤设置.标题{
背景：#efef；
文本对齐：居中；
文本转换：大写；
字号：600；
显示：块；
填充：10px 15px；
字体大小：12px；
}
.设置项目{
填充：10px 30px；
}
.设置项目.开关{
浮动：对；
}
/*开关*/
.ONOFF开关{
位置：相对位置；
宽度：54px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2px实心#1AB394；
边界半径：3px；
}
.ONOFF开关内部{
显示：块；
宽度：200%；
左边距：-100%；
-moz转换：0秒时的余量为0.3秒；
-webkit过渡：0秒后0.3秒的余量；
-o型过渡：0秒时裕度为0.3秒；
过渡：0秒时，边距为0.3秒；
}
.ONOFF开关内部：之前，
.ONOFF开关内部：之后{
显示：块；
浮动：左；
宽度：50%；
高度：16px；
填充：0；
线高：16px；
字体大小：10px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“关于”；
左侧填充：7px；
背景色：#1AB394；
颜色：#FFFFFF；
}
.ONOFF开关内部：之后{
内容：“关”；
右侧填充：7px；
背景色：#FFFFFF；
颜色：#919191；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；
宽度：18px；
保证金：0；
背景：#FFFFFF；
边框：2px实心#1AB394；
边界半径：3px；
位置：绝对位置；
排名：0；
底部：0；
右：36px；
-moz转换：所有0.3秒在0秒内轻松完成；
-webkit过渡：所有0.3都在0秒内轻松实现；
-o-过渡：所有0.3秒在0秒内轻松完成；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0；
}

选项

在此处更改设置。
方案A
方案B
备选案文C

«有些问题是概念性的，在尝试之前需要理解。»

我对此感到愤慨。让我们试着做一个完整的解释

首先，您“想要滑动引导div，但没有任何关于如何操作的线索。”。我想你查过文件就是为了说这个。。。无论如何，你是对的，因为你所说的“bootstrap div”并不打算这样做。它们的目的是根据您只需实现的CSS“自动调整”自己以适应设备宽度

这些div不是“固定的”，而是“浮动的”。这意味着，如果它们无法容纳行的剩余空间，则基于，它们将向下浮动

因此您需要进行一些计算。

您将根据从呈现页面获得的“测量值”进行计算，必须在
调整大小
上重新进行这些计算，因为手机已经着陆
$(document).ready(function() {

  // Get our element count.
  var carouselItemCount = $(".carousel-item").length;
  // An index to always know the sliding container position.
  var moveIndex = 0;
  // Always have 3 elements in view.
  var maxMove = carouselItemCount-2;

  // Function to set all elements widths.
  function setWidths(){
    // Get the window witdh
    var WWidth = $(window).width();
    console.log("WWidth: "+WWidth);

    // Are we in a Small device?
    var SM = false;
    if(WWidth<768){
      SM = true;
    }
    // If yes, wewant to show 3 elements anyway,
    // so we can't rely on the .col-sm-2 width
    // because it is equal to 100% of the window.
    if(SM){
      var SM2width = WWidth/4;
    }else{
      var SM2width = $(".col-sm-2").first().outerWidth(true);
    }
    $(".carousel-item").width(SM2width);

    // Get the items widths with and without border/margin
    var carouselItemWidth = $(".carousel-item").width();
    var carouselItemOuterWidth = $(".carousel-item").outerWidth(true);

    // Set carousel item margin (remainder of caroussel-inner - 3* items);
    var carouselInnerVisibleSpaceLeft = $(".carousel-inner").parent("div").innerWidth() - (carouselItemWidth * 3);
    $(".carousel-item").css({"margin": "0 "+carouselInnerVisibleSpaceLeft/8+"px"});

    // Get the new items outer widths (we just changed it)
    var NewCarouselItemOuterWidth = $(".carousel-item").outerWidth(true);

    // Get the items border, as it causes an offset issue.
    var border = parseInt($(".item").css("border"));
    console.log("border: "+border);

    // Set animate postion (needed on resize)
    $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},0);


    // ========== Movements triggered by user

    // LEFT
    $("#left_btn").off('click').on('click', function(e) {

      console.log("Click left");
      moveIndex++;
      if(moveIndex<maxMove){
        $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},800);
      }else{
        console.log("full left reached");
        // Canccel that moveIndex addition.
        moveIndex--;
      }
    });

    // RIGHT
    $("#right_btn").off('click').on('click', function(e) {

      console.log("Click right");
      moveIndex--;
      if(moveIndex>=0){
        $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},800);
      }else{
        console.log("full right reached");
        // Canccel that moveIndex substraction.
        moveIndex++;
      }
    });

  } // setWidths

  // Set all elements width on load and get the carousel item widths needed for movements.
  setWidths();
  // Set all elements width on resize.
  $(window).on("resize", setWidths);

});  // Ready