Javascript 仅在移动设备的引导多转盘中显示1项

我已经开始工作了，但是我不知道如何在手机屏幕上只显示1项而不是3项

我认为这不是html/css问题，而是javascript问题。然而，由于javascript非常弱，我不知道如何处理它。在桌面上，我希望看到现在的3个项目，但在手机上，我希望一次只显示1个项目

HTML

jQuery：

// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

---

我不太确定我是否理解您试图在JS代码中实现的目标，但有一种方法：

 $('.multi-item-carousel .item').each(function(){
// check the screen width
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
      // console.log(width);
      if (width > 960) { // do a conditional: if screen width greater than 960px for example
      //following code shows three images per slide
      //without it, its just one image per slide
         var next = $(this).next();
          if (!next.length) {
            next = $(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo($(this));

          if (next.next().length>0) {
            next.next().children(':first-child').clone().appendTo($(this));
          } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
          } 
    }   
});

您的代码没有太清楚地说明您从其他幻灯片中选取项目并将其插入给定幻灯片的方式或原因。但是，此代码确保在移动设备特定的屏幕宽度上，每张幻灯片有一个项目

主要的好处是利用窗口对象来检查宽度并相应地调整旋转木马代码：

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

 $('.multi-item-carousel .item').each(function(){
// check the screen width
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
      // console.log(width);
      if (width > 960) { // do a conditional: if screen width greater than 960px for example
      //following code shows three images per slide
      //without it, its just one image per slide
         var next = $(this).next();
          if (!next.length) {
            next = $(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo($(this));

          if (next.next().length>0) {
            next.next().children(':first-child').clone().appendTo($(this));
          } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
          } 
    }   
});

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;