При скролле слайдера открывается модальное окно

$("#lightSlider").lightSlider({
        item: 5,
        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 190,
        
        addClass: "",
        mode: "slide",
        useCSS: true,
        cssEasing: "ease", //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: "linear", //'for jquery animation',////
        
        speed: 400, //ms'
        auto: false,
        loop: false,
        slideEndAnimation: true,
        pause: 2000,
        
        keyPress: false,
        controls: true,
        prevHtml: "",
        nextHtml: "",
        
        rtl: false,
        adaptiveHeight: false,
        
        vertical: false,
        verticalHeight: 500,
        vThumbWidth: 100,
        
        thumbItem: 10,
        pager: false,
        gallery: false,
        galleryMargin: 5,
        thumbMargin: 5,
        currentPagerPosition: "middle",
        
        enableTouch: true,
        enableDrag: true,
        freeMove: true,
        swipeThreshold: 40,
        
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    item: 4,
                    slideMove: 1,
                    slideMargin: 100,
                },
            },
            {
                breakpoint: 1025,
                settings: {
                    item: 4,
                    slideMove: 1,
                    slideMargin: 80,
                },
            },
            {
                breakpoint: 992,
                settings: {
                    item: 3,
                    slideMove: 1,
                    slideMargin: 150,
                },
            },
            {
                breakpoint: 762,
                settings: {
                    item: 2,
                    slideMove: 1,
                    slideMargin: 50,
                },
            },
            {
                breakpoint: 520,
                settings: {
                    item: 2,
                    slideMove: 1,
                    slideMargin: 190,
                },
            },
            {
                breakpoint: 375,
                settings: {
                    item: 2,
                    slideMove: 1,
                    slideMargin: 240,
                },
            },
            {
                breakpoint: 320,
                settings: {
                    item: 2,
                    slideMove: 1,
                    slideMargin: 220,
                },
            },
        ],
        
        onBeforeStart: function (el) {},
        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {},
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightslider.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightslider.min.css
" rel="stylesheet">

<ul class="carousel theme" id="lightSlider">
            <li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li>
       <li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li><li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li><li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li><li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li><li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li><li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li><li>
                <div class="item">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#card1" class="btn">
                        <div class="item_recent">
                            <div class="gradient"></div>
                            <img src='https://www.top-garderob.ru/content/catalog/20240302193036761.jpeg' alt="" />
                            <div class="content">
                                <p>{{ $el->title }}</p>
                                <span>{{number_format($el->price, 0, ',', ' ')}} ₽</span>
                            </div>
                        </div>
                    </a>
                </div>
            </li>
    </ul>
    
    <!-- Modal -->
        <div class="modal fade modal-cards" id="card1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    
                    <div class="modal-header">
                        <img class="big-img" src="/content/catalog/{{ $el->img_modal }}" />
                        <div class="header-content">
                            <a href="#" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><img src="/assets/img/icon/close_d.svg" /></a>
                        </div>
                    </div>
                    
                    <div class="modal-body">
                        
                        <div class="col-lg-12 col-md-9 col-12 px-0">
                            <div class="modal-padding1">
                                <h1>{{ $el->title }}</h1>
                            </div>
                        </div>
                        
                    
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal end -->