简单的Bootstrap传送带不适用于Angular 8

如何解决简单的Bootstrap传送带不适用于Angular 8

我正在使用带有字体真棒套件的Angular 8和Bootstrap 4.5版。我在一个名为font-project的组件中。当我尝试使用旋转木马滑动一些图像时，旋转木马指示器会像一个重击光标一样创建一个超链接，但它不起作用，它停留在第一张图像上。在带有轮播控件图标的情况下，它会创建一个超链接，并在左下角显示一个地址，并带有http：// localhost：4200 / font-project＃example，但它不起作用，但仍停留在第一张图像上。 / p>

我尝试找出的代码如下：

#Dishin H Goyani
In [73]: %timeit df["New_column"] = df.apply(lambda x: ','.join(df.columns[x==1]),axis=1)
3.98 s ± 129 ms per loop (mean ± std. dev. of 7 runs,1 loop each)

#Akshay Sehgal
In [75]: %timeit df['new_column'] = df.apply(lambda x: ','.join(list(x[x!=0].index)),axis=1)
11 s ± 349 ms per loop (mean ± std. dev. of 7 runs,1 loop each)

#Rajith Thennakoon
In [78]: %%timeit
    ...: df["new_column"] = df.apply(lambda x: (pd.DataFrame(x[x==1]).index.values),axis=1)
    ...: df["new_column"] = df["new_column"].apply(lambda x: ','.join(map(str,x)))
    ...: 
    ...: 
25.9 s ± 709 ms per loop (mean ± std. dev. of 7 runs,1 loop each)

解决方法

您可以使用ToggleButton库进行滑动。]

ui-carousel

了解更多信息click

,

指标的数据目标和控件的href属性都应与最上面的div的ID：<div id="example" class="carousel slide" data-ride="carousel">相匹配。

从这些属性中删除“ / font-project”，并为最后一个链接修复data-slide中丢失的连字符，这可行：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#example" data-slide-to="0" class="active"></li>
            <li data-target="#example" data-slide-to="1"></li>
            <li data-target="#example" data-slide-to="2"></li>
            <li data-target="#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="#example" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>