Показывать только 1 предмет в Bootstrap Multi Carousel в мобильном телефоне

Question

КОДЕПЕН ДЕМО

Я получил это работает, но я не мог понять, как показать только 1 элемент вместо 3 на экране мобильного телефона.

Я не думаю, что это проблема html / css, а проблема javascript. Тем не менее, я не могу понять, как это сделать, будучи довольно слабым в JavaScript. На рабочем столе я хотел бы видеть 3 элемента, как сейчас, но в мобильном я хотел бы показывать только 1 элемент за один раз.

HTML

<div class="container">
  <h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>
          <!-- add  more items here -->
          <!-- Example item start:  -->

          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>

          <!--  Example item end -->
        </div>
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

CSS

.multi-item-carousel .carousel-inner > .item {
  transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
  left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
  left: 33%;
}
.multi-item-carousel .carousel-inner .next {
  left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
  left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
    transition: 500ms ease-in-out all;
    backface-visibility: visible;
    transform: none !important;
  }
}
.multi-item-carousel .carouse-control.left, .multi-item-carousel .carouse-control.right {
  background-image: none;
}

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));
  }
});

Answer 1

Я не слишком уверен, что понимаю, чего вы пытаетесь достичь в коде 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));
          } 
    }   
});

Ваш код не проясняет, как и почему вы выбираете элементы из других слайдов и вставляете их в данный слайд. Тем не менее, этот код обеспечивает один элемент на слайд на мобильных устройствах (определенная ширина экрана)

Главное, что нужно сделать, это использовать объект window, чтобы проверить ширину и соответствующим образом изменить код карусели:

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

CODEPEN