javascript - 根据我的引导轮播的位置设置文本
问题描述
我正在尝试根据我的引导轮播的图像位置设置一些文本。换句话说,如果轮播显示第一个图像,我想在它旁边显示一些说明性文本,如果轮播显示第二个,它必须显示另一个说明性文本,它对应于图像幻灯片的编号。
到目前为止,我有这个 HTML 来设置我的轮播和文本的位置:
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide col-7 px-0" 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" id="c-1">
<img class="d-block" src="views\img\banner\boletos.jpg" alt="First slide" style="object-position: center; object-fit: cover; width: 100%; height: 500px;">
</div>
<div class="carousel-item" id="c-2">
<img class="d-block" src="views\img\banner\concierto.png" alt="Second slide" style="object-position: center; object-fit: cover; width: 100%; height: 500px;">
</div>
<div class="carousel-item" id="c-3">
<img class="d-block" src="views\img\banner/blog.jpg" alt="Third slide" style="object-position: top; object-fit: cover; width: 100%; height: 500px;">
</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>
<span class="sr-only">Next</span>
</a>
</div><!-- End carousel -->
<div class="caption-group col-5">
<div class="carousel-caption active" style="color: #000000!important;" id="t-1">
<h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet</p>
</div>
<div class="carousel-caption" style="color: #000000!important;" id="t-2">
<h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet</p>
</div>
<div class="carousel-caption" style="color: #000000!important;" id="t-3">
<h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
这个css设置一些位置:
.carousel-caption {
/*left:0;
right:0;*/
top: 50%;
transform: translateY(-50%);
text-align:left;
padding:15px;
background:rgba(0,0,0, 0);
text-shadow:none;
}
.caption-group {
position:relative;
top:0;
right:0;
}
.list-group-item {
border-radius:0px;
cursor:pointer;
}
.list-group-item .active {
background-color:#eee;
}
@media (min-width: 992px) {
#myCarousel {padding-right:33.3333%;}
#myCarousel .carousel-controls {display:none;}
}
@media (max-width: 991px) {
.carousel-caption p {display:none;}
}
我认为这可以通过一些 Javascript 代码来实现,但我不知道如何。
解决方案
根据Bootstrap carousel 的文档,您可以在其中插入一个.carousel-caption
元素.carousel-item
,默认情况下它将自动显示在较大的视口中。
推荐阅读
- python - 转换为字符串后如何从字典值中检索最后 5 个字符
- laravel - 事件侦听器未从 mount() 方法接收 Laravel Livewire 发射(但在从刀片发射时工作)
- python - 更改另一个文件python中变量的值
- javascript - 如何基于单选按钮隐藏和取消隐藏表单字段?
- laravel - 无法删除失败的作业(laravel 7)
- vb.net - 删除 WebBrowser 控件正在访问的文件 - VB.net
- javascript - 如何同时连接到多个 mikrotik?
- c# - .NET 5.0 打开选择文件夹对话框
- spring-boot - Spring Boot 中使用 RabbitListener 注解创建优先级队列
- scala - ScalaCheck 在有状态测试中收缩命令数据