Question

我想在移动设备上制作更大的旋转木马。有没有办法实现这个目标？当你查看我的代码时，你会发现移动屏幕上的轮播很小： https://codepen.io/Codewife_101/pen/XeJaLR

＆＃13;

<nav class="navbar navbar-expand-sm navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Brand Name</a>
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNav2">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
  </nav>


<!--Showcase-->
<section id="showcase">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="http://lorempixel.com/1600/450" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://lorempixel.com/1600/450" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://lorempixel.com/1600/450" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true">
      <span class="sr-only">Next</span>
    </a>
</div>
</section>

＆＃13;

我的想法是上传三张不同的图片1,2,3。我使用lorempixels只是为了显示所需的尺寸，但在现实生活中我想上传3张不同的图片。 @cwanjt给出的解决方案适用于一些微小的调整，但作为最终结果，我需要一些不同的东西。我正在思考＆＃34;隐藏＆＃34; Bootstrap中的课程4.有什么想法吗？我的CSS：

.carousel-inner > .item > img { min-width: 100%; width: 100%; }

Answer 1

我会猜测你想要完成的事情，并希望我能够参与其中。您可以使用一些旧的CSS media查询来更改img元素的网址，而不是使用两个不同的轮播。

从src元素中删除img属性，并创建一个实现具有content值的url(path/to/image/file)属性的类。

.change-img {
      content: url(http://lorempixel.com/1600/750);
    }

现在创建一个媒体查询，当视口达到指定大小时，该查询将更改URL的值。

@media screen and (max-width: 700px) {
    .change-img {
      content: url(http://lorempixel.com/1600/1550);
    }
}

将课程添加到img元素。

<div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100 change-img" alt="First slide">
      </div>
      ...

我分叉了您的codepen并实现了此代码，因此您可以看到它正常工作。只需将浏览器的大小调整为700px，您就会看到旋转木马中的第一张图像的高度会更大。

如何在移动屏幕上制作更大的旋转木马？

1 个答案: