ASP owl carousel how to stop reset slide to page 1 after timer tick

Question

I have 6 gridview and a owl carousel 2 . gridview is group into 2 slide and automatic slide every 2 minutes. The problem is when the timer ticked it reset the slide to page 1 or slide 1. im using updatepanel. Is there a way to not join the carousel to the tick or is there a way to put the carousel out side of the updatepanel

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.bundle.min.js"></script>
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="Content/owl.carousel.min.css" rel="stylesheet" />
<link href="Content/owl.theme.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/owl.carousel.min.js"></script>

    <script type="text/javascript">
$(document).ready(function () {
    createCarousel();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    createCarousel();
});

function createCarousel() {
    var owltrend = $('.owl-carousel');
    owltrend.owlCarousel({
        items:2,
        margin: 5,
        slideBy: 2,
        loop: false,
        startPosition: 0,
        lazyLoad: true,
        rtl: false,
        nav: false,
        autoWidth: false,
        autoplay: true,
        autoplayTimeOut: 120000,
        autoplayHoverPause:true
    });
}

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <div style="text-align: right; padding-right: 10%;">
            <asp:Label runat="server" CssClass="lbl" ID="lbltime"></asp:Label>
        </div>
    <br />
<div class="owl-carousel owl-theme">
    <div class="item" data-merge="1" runat="server" id="div_1">
        <asp:GridView AutoGenerateColumns="false" CssClass="table table-dark table-striped table table-bordered table-responsive" runat="server" ShowHeader="false" ViewStateMode="Disabled" ID="GridView_1">
        </asp:GridView>
    </div>

    <div class="item" data-merge="1" runat="server" id="div_2">
        <asp:GridView AutoGenerateColumns="false" CssClass="table table-dark table-striped table table-bordered table-responsive" runat="server" ShowHeader="false" ViewStateMode="Disabled" ID="GridView_2">
        </asp:GridView>
    </div>

    <div class="item" data-merge="1" runat="server" id="div_3">
        <asp:GridView AutoGenerateColumns="false" CssClass="table table-dark table-striped table table-bordered table-responsive" runat="server" ShowHeader="false" ViewStateMode="Disabled" ID="GridView_3">
        </asp:GridView>
    </div>

    <div class="item" data-merge="1" runat="server" id="div_4">
        <asp:GridView AutoGenerateColumns="false" CssClass="table table-dark table-striped table table-bordered table-responsive" runat="server" ShowHeader="false" ViewStateMode="Disabled" ID="GridView_4">
        </asp:GridView>
    </div>

    <div class="item" data-merge="1" runat="server" id="div_5">
        <asp:GridView AutoGenerateColumns="false" CssClass="table table-dark table-striped table table-bordered table-responsive" runat="server" ShowHeader="false" ViewStateMode="Disabled" ID="GridView_5">
        </asp:GridView>
    </div>

    <div class="item" data-merge="1" runat="server" id="div_6">
        <asp:GridView AutoGenerateColumns="false" CssClass="table table-dark table-striped table table-bordered table-responsive" runat="server" ShowHeader="false" ViewStateMode="Disabled" ID="GridView_6">
        </asp:GridView>
    </div>


</div>


<asp:Timer ID="timer1" runat="server" OnTick="timer1_Tick" Interval="1000" Enabled="true" />
    </ContentTemplate>
</asp:UpdatePanel>