ASP.NET Core页面点击表单输入框时暂停Owl Carousel轮播

在ASP.NET Core页面中，我使用了Owl Carousel轮播组件，轮播内包含注册表单。需求是：当用户点击表单的任意输入框时，轮播停止自动切换，方便用户完成注册操作。页面中有两个独立的轮播（.home-slider和.carousel-testimony）及对应表单，点击任一表单的输入框后，所有轮播都需锁定不再切换。

要实现该需求，我们可以通过监听表单输入元素的focus事件，调用Owl Carousel提供的API来暂停自动轮播。具体步骤如下：

• 初始化轮播时保存实例引用，方便后续调用控制方法
• 为所有表单内的输入、选择框绑定focus事件
• 在事件回调中触发轮播的停止自动播放命令

JavaScript代码 #

$.Scrollax();

// 保存两个轮播的实例，用于后续控制
let homeSliderInstance, testimonySliderInstance;

var carousel = function() {
    homeSliderInstance = $('.home-slider').owlCarousel({
        loop:true,
        autoplay: true,
        margin:0,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        nav:true,
        dots: true,
        autoplayHoverPause: false,
        items: 1,
        navText : ["<span class='ion-ios-arrow-back'></span>","<span class='ion-ios-arrow-forward'></span>"],
        responsive:{
            0:{ items:1 },
            600:{ items:1 },
            1000:{ items:1 }
        }
    });
    testimonySliderInstance = $('.carousel-testimony').owlCarousel({
        center: true,
        loop: true,
        items:1,
        margin: 30,
        stagePadding: 0,
        nav: false,
        navText: ['<span class="ion-ios-arrow-back">', '<span class="ion-ios-arrow-forward">'],
        responsive:{
            0:{ items: 1 },
            600:{ items: 1 },
            1000:{ items: 1 }
        }
    });
};
carousel();

// 监听表单内所有输入、选择框的focus事件，停止轮播自动切换
$('.booking-form input, .booking-form select').on('focus', function() {
    homeSliderInstance.trigger('stop.owl.autoplay');
    testimonySliderInstance.trigger('stop.owl.autoplay');
});

// 可选：若需要用户离开输入框后恢复轮播，取消以下注释
// $('.booking-form input, .booking-form select').on('blur', function() {
//     homeSliderInstance.trigger('play.owl.autoplay', [true]);
//     testimonySliderInstance.trigger('play.owl.autoplay', [true]);
// });

HTML代码（无需修改） #

<section class="home-slider owl-carousel ">
    <div class="slider-item  ">
        <div class="overlay"></div>
        <div class="container-fluid p-0">
            <div class="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
                <div class="one-third order-md-last img js-fullheight" style="background-image:url(images/bg_3.jpg);">
                    <div class="overlay"></div>
                </div>
                <div class="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
                    <div class="text mt-md-5">
                        <h1 class="mb-4">Ev yapımı yiyecekler <br> Delicious Foods</h1>
                       <!---- Order-->
                        <div class="booking">
                            <div class="container">
                                <div class="row align-items-center">
                                    <div class="col-lg-9">
                                        <div class="booking-form">
                                            <form>
                                                <div class="control-group">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Name" required="required" />
                                                        <div class="input-group-append">
                                                            <div class="input-group-text"><i class="far fa-user"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <div class="input-group">
                                                        <input type="email" class="form-control" placeholder="Email" required="required" />
                                                        <div class="input-group-append">
                                                            <div class="input-group-text"><i class="far fa-envelope"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Mobile" required="required" />
                                                        <div class="input-group-append">
                                                            <div class="input-group-text"><i class="fa fa-mobile-alt"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <div class="input-group date" id="date" data-target-input="nearest">
                                                        <input type="text" class="form-control datetimepicker-input" placeholder="Date" data-target="#date" data-toggle="datetimepicker" />
                                                        <div class="input-group-append" data-target="#date" data-toggle="datetimepicker">
                                                            <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <div class="input-group time" id="time" data-target-input="nearest">
                                                        <input type="text" class="form-control datetimepicker-input" placeholder="Time" data-target="#time" data-toggle="datetimepicker" />
                                                        <div class="input-group-append" data-target="#time" data-toggle="datetimepicker">
                                                            <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <div class="input-group">
                                                        <select class="custom-select form-control">
                                                            <option selected>Guest</option>
                                                            <option value="1">1 Guest</option>
                                                            <option value="2">2 Guest</option>
                                                          
                                                            <option value="10">10 Guest</option>
                                                        </select>
                                                        <div class="input-group-append">
                                                            <div class="input-group-text"><i class="fa fa-chevron-down"></i></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <button class="btn custom-btn" type="submit">Order Now</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

内容的提问来源于stack exchange，提问作者masoud mazloum