时间戳

首页 > 解决方案 > 我如何设计这个引导轮播？

html - 我如何设计这个引导轮播？

问题描述

我有这个引导轮播（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>

标签： htmlbootstrap-4bootstrap-carousel

解决方案

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

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

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

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

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

推荐阅读