Question

$('#checkAll').click(function () {
  $('input:checkbox').not(this).not(ignore_ids).prop('checked', this.checked);)
});

在我的项目中，他们要求在轮播上添加表格，我已经尝试了所有解决方案，但没有一个对我有用。谁能指导我解决问题？

Answer 1

您可以像这样使用位置relative和absolute模式。

更新：将表单移出轮播div并设置表单z-index。

#banner{
position: relative;
}
form{
position: absolute;
top:50px;
left:50px;
z-index:100;
}

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})

#banner{
position: relative;
}
form{
position: absolute;
top:50px;
left:50px;
z-index:100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />

<div id="banner">

<section id="owl-banner" class="owl-carousel owl-theme">
        <div class="item">
            <img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 2">
            <div class="homebannercontent">
                <h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Truhealing-</h5>
                <p style="color:#ffffff; font-size:30px;font-family:Titillium Web;line-height:1.6;">Complete Health care <br>Solution for women</p>
            </div>
        </div>
        <div class="item">
            <img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 4">
            <div class="homebannercontent">
                <h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Your health is in <br>your hands</h5>
            </div>
        </div>
        <div class="item">
            <img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 3">
            <div class="homebannercontent">
                <h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Get your hormones <br>working for you</h5>
            </div>
        </div>
        <div class="item">
            <img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 4">
            <div class="homebannercontent">
                <h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Address <br>the root cause</h5> 
            </div>
        </div>
       
    </section>
	 <div class="col-md-6">
                    <form action="/action_page.php">
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                        </div>
                        <div class="form-group">
                            <label for="pwd">Password:</label>
                            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
</div>

无法在caroiusel上添加表单

1 个答案: