Bootstrap toggle checkbox doesn't work in Bootstrap carousel

I have problems using bootstrap toggle checkboxes and with editing checkboxes in a carousel.

I need a carousel with indicators. In this carousel there is a table with workflows that have to be checked as you can see here:

There are two problems with this solution.

First issue:
The checkboxes aren't editable. I found out that the checkboxes are editable when I remove the carousel indicators so I think a possible issue is that the indicators transparently overlying the checkboxes so that they are not editable. How could I fix this? The indicators are necesarry.

Second issue:
I use bootstrap-toggle to give my checkboxes a toggle style. But the checkboxes are shown as normal checkboxes. I tried a little bit and if I leave some code out it works but not if I complete. I think this could have to do with CSS. I tried a lot but I cannot find the reason for this issue.

Is there someone who is able to help?

I use Angular with Typescript. My Code is shown below:

HTML

<div class="container mt-3">
   <div id="carouselPrufung" class="carousel slide" data-ride="carousel" data-interval="false">
    <ol class="carousel-indicators top carousel-indicators-numbers">
       <li data-target="#carouselPrufung" *ngFor="let j of arrAuftrag; let l = index" [attr.data- 
         slide-to]="l" [ngClass]="l == 0 ? 'active' : ''"></li>
    </ol>
    <div class="carousel-inner top-index">
      <div *ngFor="let i of arrAuftrag; let k = index" [ngClass]="k == 0 ? 'carousel-item active' : 
         'carousel-item'">
         <table class="table table-sm mt-5">
           <thead>
             <tr>
               <th scope="col">Kontrolle</th>
               <th scope="col">OK</th>
             </tr>
           </thead>
          <tbody>
             <tr *ngFor="let text of fehlertexte">
              <td></td>
              <td><input id="gid" type="checkbox" 
                 checked data-toggle="toggle"></td>
             </tr>
          </tbody>
       </table>
      </div>
     </div>
   </div>
 </div>

CSS

    li {
        text-indent: 0;
        margin: 0 2px;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 100%;
        line-height: 30px;
        background-color: #999;
        color: #fff;
        transition: all 0.25s ease;
        text-align: center;
        &.active, &:hover {
            margin: 0 2px;
            width: 30px;
            height: 30px;
            background-color: #337ab7;        
          }
    }
    z-index: 1;
}
.top-index {
    z-index: 2;
}
.top {
    top: 10px;
    margin:0;
    padding-left:15px;
    padding-right:15px;
}
/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.toggle-off {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}```