Fiq Fiq - 1 month ago 13
CSS Question

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. attached picture as sample

Computer View

Picture 1 is at computer view that I want but it become as picture 2 when in mobile

Mobile View

I want to make it one and remove another 1. Display it one by one.

Below was HTML code and CSS. I'm using bootstrap too.

<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div id="Carousel" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
</ol>

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

<div class="item active">
<div class="row">
<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="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" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->

<div class="item">
<div class="row">
<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><!--.row-->
</div><!--.item-->

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

<a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a>

</div><!--.Carousel-->

</div> <!--.col-md-8-->
</div><!--.row-->


CSS:

.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* The controlsy */
.carousel-control {
left: -30px;
height: 0px;
width: 0px;
font-size: 153px;
background: none repeat scroll 0 0 #000000;
border: none;
border-radius: 20px 20px 20px 20px;
margin-top: 0px;
}
.carousel-control.right {
right: -12px;
}
.carousel-control.left {
left: -62px;
}
/* The indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #ffffff;
}
.carousel-indicators .active {
background: #1b365d;
}


your help is really appreciate.

Answer

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-->