我如何设计这个引导轮播？答案

【问题标题】：How do I style this bootstrap carousel?我如何设计这个引导轮播？
【发布时间】：2020-04-02 19:44:05
【问题描述】：

我有这个引导轮播（v4），我想改变它的风格，主要是它的边距。我实际上隐藏了轮播的主要部分，我保留缩略图只是因为我希望最终只得到像缩略图滑块这样的东西。

但是我不知道如何摆脱它周围的所有空间（几个像素填充就可以了......）。另外，请问如何让缩略图变大？

非常感谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Carousel</title>

    <!--jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style>
body {
    background-color: #CACACA
}

.container {
    margin-top: 100px;
    margin-bottom: 100px
}

.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators>li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

.carousel-item img {
    width: 80%
}
  </style>
</head>
<body style="margin:0; padding:0;">


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="custCarousel" class="carousel slide" align="center">
                <!-- slides -->
                <div class="carousel-inner" style="display: none;">
                    <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                    <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                </div>

              <!-- Thumbnails -->
                <ol class="carousel-indicators list-inline">
                    <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                    <li class="list-inline-item"> <a id="carousel-selector-3" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<script>

$(document).ready(function () {
  $('#custCarousel').on('slide.bs.carousel', function (e) {
    console.log('Showing picture ' + e.to)
  });
});
</script>
</body>
</html>

【问题讨论】：

当您说“我不知道如何摆脱它周围的所有空间”时，它是什么？整个轮播本身？
如果我对 html 的理解正确，这些缩略图应该从页面的左上角开始。但是，由于在某处定义了一些边距，它们离左上角太远了。我说的就是这个空间。我希望这是有道理的，否则我一定误解了这些概念。
另外，要补充一点，这是 css 中的这两个边距（margin-top 和 margin-bottom，每个 100px）但是如果我删除这些缩略图会更靠近页面顶部但那里左边还有一些空间。

标签： html bootstrap-4 bootstrap-carousel

【解决方案1】：

说真的，您正在尝试以一种本不打算使用的方式使用此轮播，因此要让它按您想要的方式工作将是一场艰苦的战斗。隐藏主图像意味着缩略图仍将居中，因为这就是轮播的工作方式。

如果将其更改为大于 100 像素，缩略图本身可能会更大：

#custCarousel .carousel-indicators>li {
    width: 100px
}

要将缩略图移到左侧和中间，您需要执行以下操作：

.carousel-indicators {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
}

【讨论】：

感谢您的建议。我同意你的观点，我在滥用轮播。请问您有什么想法会更好。我想做一个控件，在其中放 4 个缩略图，一个挨着另一个，（可折叠成一个真的很酷）单击一个，然后页面上的其他地方会发生一些事情
答案已被接受，但对于任何阅读本文的人来说，最有价值的一点是第一句话“....被使用...”