Carousel does not load the second image on the mobile in the portrait position

Hello,

I have a carousel on my site that is the basis to show my products, it works well on pc (shows 4 images in sequence) and on tablet (shows 2 images in sequence) but on mobile we have a problem, in the vertical position shows 1 image and so far it is correct, but when I move to the horizontal position I wanted To show 2 images I entered the bootstrap file.css and changed the percentage of col-xs-12 when in the portrait position, as the code below:

/* Landscape */
@media only screen 

  and (min-device-width: 375px) 

  and (max-device-width: 667px) 

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) { 

      .col-xs-12 {

          width: 50%;

      }

}

This is my JS code:

$('.carousel[data-type="multi"] .item').each(function()

{

    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
      next=next.next();
      if (!next.length) {
          next = $(this).siblings(':first');
      }

      next.children(':first-child').clone().appendTo($(this));
    }
});

What I would like to see happen is the following: Computer - 4 items-OK Vertical Tablet-2 items - OK Tablet portrait - 4 items - OK Vertical cell phone - 1 Item - OK Mobile Portrait-2 Items-Does Not Work

In mobile portrait, it is showing an image and on the side of it is a blank space with the same size, as if to show but for some detail does not show.

My HTML:

<div id="osascogastronomia1" class="carousel slide" data-type="multi" data-interval="false" data-ride="osascogastronomia1">
                        <div class="carousel-inner">
                            <?php
                            while ($slides->have_posts()) : $slides->the_post();
                                $index1++
                                ?>
                                <?php if ($index1 == 1): ?>
                                    <div class="item active">
                                    <?php else: ?>
                                        <div class="item">
                                        <?php endif; ?>
                                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                            <a href="<?= the_permalink(); ?>">
                                            <div class="darker">
                                                <div class="inserirDarker">
                                                    <?php the_post_thumbnail(); ?>
                                                </div>
                                            </div>
                                            <div class="carousel-caption">
                                                    <h5 style="color: white"><strong><?php the_title(); ?></strong></h5>
                                            </div>
                                            </a>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                            <?php endif; ?>
                        </div>
                        <div>
                            <a class="left carousel-control" href="#osascogastronomia1" role="button" data-slide="prev">
                                <div class="setaEsquerda"></div>
                                <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
                                <!--<span class="sr-only">Previous</span>-->
                            </a>
                            <a class="right carousel-control" href="#osascogastronomia1" role="button" data-slide="next">
                                <div class="setaDireita"></div>
<!--                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>-->
                            </a>
                        </div>
                        <!--Fim Carousel Inner-->
                    </div>
                    </div>

Could anyone help me with this detail?

Is this way on the mobile, on the right is an empty space.