twitter-bootstrap - 整个滑动仅包含带有两个控制箭头的文本

Question

我使用 Bootstrap 创建了一个网站。我想在我的网站中添加滑块 a，该滑块 a<div>只包含文本，而不是图像。此外，该滑块包含两个用于控制的箭头。请给我推荐一个滑块。

标签： twitter-bootstrapbootstrap-4slider

Answer 1

这是一个可能适合您的滑块示例。它有控件并且只是文本。

.carousel {
  background-color: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div id="carouselContent" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active text-center p-4">
                 <p>lorem ipsum (imagine longer text)</p>
            </div>
            <div class="carousel-item text-center p-4">
                
                <p>lorem ipsum (imagine longer text)</p>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselContent" 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="#carouselContent" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>