Слайд целиком <div>, содержащий только текст с двумя управляющими стрелками - PullRequest
Новая
       31

Слайд целиком <div>, содержащий только текст с двумя управляющими стрелками

0 голосов
/ 30 мая 2019

Я сделал сайт, используя Bootstrap. Я хочу добавить слайдер а на моем веб-сайте, который слайдов <div> содержит только текст, а не изображение. Кроме того, этот слайдер содержит две стрелки для элементов управления. Пожалуйста, предложите мне слайдер.

1 Ответ

0 голосов
/ 30 мая 2019

Вот пример слайдера, который может работать для вас.Он имеет элементы управления и только текст. 

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