Hello,
I have a carousel on my site which is the basis for showing my products, it works fine on the pc (shows 4 images in sequence) and on the tablet (it shows 2 images in sequence) but on the mobile phone we have a problem, vertical shows 1 image and so far is correct, but when I switch to the horizontal position I wanted it to show 2 images. To display 2 images I entered the bootstrap.css file and changed the percentage of col-xs-12 when it is in the mobile phone in portrait position, according to 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 this: Computer - 4 Items - OK Vertical Tablet - 2 Items - OK Portrait Tablet - 4 Items - OK Vertical Mobile Phone - 1 Item - OK Cell Phone Portrait - 2 Items - Does not Work
In the cellular portrait, it is showing an image and on the side of it is a blank space of the same size, as if it were to show however 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?
It's like that on your cell phone, on the right is an empty space.