Bootstrap carousel with a Repeater

[DARK__FOXX]

I need to create a slider that displays images that are retrieved from a dataset.
My problem is that I use this code here:

<%#If(Container.ItemIndex = 0, "active", "") %>

it displays me only the first element while I would like it to display the others as well as they scroll automatically.
I don't know if there is a way to get it to remove me and add the "active" class. I tried with Jquery using removeClass and AddClass but failed.

This is my piece of code:

 <div id="slider" class="carousel slide col-10" runat="server">
                       <div class="carousel-inner">
                        <asp:Repeater id="r1_SLIDER" runat="server">
                            <ItemTemplate>
                        <div class ="carousel-item <%#If(Container.ItemIndex = 0, "active", "") %>" id='<%#Container.DataItem("ID")%>'> <%--<%#If(Container.ItemIndex = 0, "active", "carousel-item") %>--%>
                        <a href='<%#Container.DataItem("LINK")%>' runat="server" OnServerClick="Apri_Link" target="_self"><img  class="d-block w-100" src="<%#Container.DataItem("PATH_IMG_G")%>?ver<%=DateTime.Now.Ticks.ToString()%>" /></a>
                        </div>
                        <%-- <div class ='carousel-caption d-none d-md-block'><span> <%#Container.DataItem("DESC_IMG")%> </span> </div>--%>                           
                            </ItemTemplate>
                        </asp:Repeater>                                           
                       </div>
                <div class="col-1"></div>
            </div>

I try this solution in JQuery:

$(document).ready(function () {
        $('.carousel-inner .carousel-item:first').addClass('active');

     $('#slider').carousel({
                 interval: 3000
        });

          $('#slider').carousel('cycle');
      }