如何将电脑中两张图片的旋转木马制作成手机中一张图片的旋转木马? [英] 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:

但是在手机中它变成图片2

But it become as picture 2 when in mobile

我要制作一个然后删除另一个.1.逐一显示.

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

下面是HTML代码和CSS.我也在使用引导程序.

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

非常感谢您的帮助.

推荐答案

有很多方法可以解决此问题.就我个人而言，我将使用两个完全不同的轮播，并使用标准的引导程序类来隐藏我不使用的那一个.

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.

例如:

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

这篇关于如何将电脑中两张图片的旋转木马制作成手机中一张图片的旋转木马?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！