How To Make Carousel With Two Pictures In Computer Display To 1 Picture In Mobile?

I want to make carousel with two pictures in row in computer display but only one picture in mobile view. This picture is at computer view that I want: But it become as picture 2

Solution 1:

There are many ways to solve this issue. Personally, I would use two completely different carousels and hide the one I'm not using with the standard bootstrap classes.

For example:

<div class='row'>
    <!-- Large Carousel -->
    <div class="hidden-xs">
          ... your carousel two picture version
    </div>
    <!-- Small Carousel -->
    <div class="visible-xs">
          ... your carousel one picture
    </div>
</div>

The reason I would do it this way is that it will give you the most control over how the two different carousels display. You'll be able to fix the two image problem and also easily adjust other styling issues. It will however lead to more lines of code.

You could alternatively do it within a single carousel using the same classes. From your example above:

<!-- Carousel items -->
<div class="carousel-inner">

    <div class="item active">
        <div class="row">
            <div class="hidden-xs">
                <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div>
                <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a>
            </div>

            <div class='visible-xs'>
                <div class="col-xs-12">
                    <a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a>
                </div>
            </div>

        </div><!--.row-->
    </div><!--.item-->

</div><!--.carousel-inner-->