小编Hab*_*bib的帖子

Bootstrap 轮播最后一项将隐藏右侧控件

我正在使用引导程序 4.0 版本。我想隐藏第一个项目的左侧控件,并隐藏最后一个项目的右侧控件。我认为使用jQuery可以解决。

左控制将一直隐藏,它只显示在最后一个项目上。右控制将一直显示但隐藏在最后一个项目中。

HTML:

<div id="carousel-1" class="carousel slide" data-ride="carousel">

      <div class="carousel-inner">
        <div class="carousel-item active">
          Slide 1
        </div>
        <div class="carousel-item">
          Slide 2
        </div>
        <div class="carousel-item">
          Slide 3
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
Run Code Online (Sandbox Code Playgroud)

查询:

$('.carousel').carousel({
    interval: false,
})

function checkitem()
{
    var $this = $('#carousel-1');
    if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
        $this.children('.carousel-control-prev').hide();
    } else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
        $this.children('.carousel-control-next').hide();
    } else {
        $this.children('.carousel-control').show(); …
Run Code Online (Sandbox Code Playgroud)

jquery bootstrap-carousel bootstrap-4

4
推荐指数
1
解决办法
4308
查看次数

标签 统计

bootstrap-4 ×1

bootstrap-carousel ×1

jquery ×1