0

编辑

好的，问题setTimeout(function(){ ... }, 3000); 似乎干扰了引导轮播功能。如何重新调整它的用途以不干扰文档的其余部分？有一个标题轮播和帖子轮播在灯箱弹出后不起作用。

原帖

长话短说，这落在了我的腿上，这是一个臃肿的预建主题，客户想要定制。他们想要一些前端编辑，不能轻易地逆向工程它是如何构建的，所以用 JS 定位元素并用我自己的标记替换 div。一切都很好，除了我创建灯箱时，它似乎干扰了轮播功能，它停止工作。有什么我可能在这里遗漏的想法吗？谢谢

if (document.querySelector(".home")) {

document.querySelector(".nk-header-title").innerHTML = `

<div id="carouselExampleControls" class="carousel slide nk-header-title-sm nk-header-title-parallax-opacity" data-ride="carousel">
    <div class="carousel-inner">


        <div class="carousel-item active" style="background-image: url('./wp-content/images/Wells-Street-Market-Header.jpg')" alt="First slide">
            <div class="overlay"></div>
        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-group.jpg')" alt="Second slide">
            <div class="overlay"></div>

        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-mixology.jpg')" alt="Third slide">
            <div class="overlay"></div>

        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-sidewalk.jpg')" alt="Fourth slide">
            <div class="overlay"></div>
        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-donuts.jpg')" alt="Fifth slide">
            <div class="overlay"></div>
        </div>



    <div class="nk-header-table">
        <div class="nk-header-table-cell">
            <div class="container">
                <h2 class="nk-subtitle" style="color: #ffffff;">205 W. Wacker Dr. Chicago Open M-F 11AM-8PM</h2>

                <h1 class="nk-title display-3" style="color: #ffffff;">WELLS STREET MARKET</h1>

                <div class="nk-gap-2"></div>
                <div style="color: #ffffff;">
                    <div class="nk-gap-4">(See vendors below for specific hours)</div>
                </div>
            </div>
        </div>
    </div>


    </div><!-- /carousel-inner -->





</div><!-- /carouselControls -->


`;
 
    
    document.querySelector(".nk-awb-overlay").innerHTML = `

<div class="nk-awb-overlay" style="background-image: url('./wp-content/images/map_background.png')"></div>

`;
    
    
    
setTimeout(function(){
    
        
document.querySelector(".home").innerHTML += `

<div class="lightbox-container">
  
   <div class="sign-up-container">

   <span onclick="document.querySelector('.lightbox-container').remove()">

<i class="fa fa-times"></i>

</span>


<h3 class="sign_up_text">
Good Eats in your Inbox
</h3>



<img class="sign_up_icons" src="./wp-content/images/sign_up_icons.svg" alt="sign up icons">


<p class="sign_up_text">Sign up for the Wells Street Market newsletter to receive exclusive offers, keep up with events and more.</p>



<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://workwithdomino.us17.list-manage.com/subscribe/post?u=c61f2c9cc665c03dfdef8af98&amp;id=e68bd54a90" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">



<div class="mc-field-group">
	
	<input type="text" value="" placeholder="First Name" name="FNAME" class="mc_form" id="mce-FNAME">
</div>

<div class="mc-field-group">
	
	<input type="text" value="" placeholder="Last Name" name="LNAME" class="mc_form" id="mce-LNAME">
</div>


<div class="mc-field-group">

	<input type="email" value="" placeholder="Email Address" name="EMAIL" class="mc_form required email" id="mce-EMAIL">
</div>


	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>   


<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c61f2c9cc665c03dfdef8af98_e68bd54a90" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe Now" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->


</div>


</div>
`;


}, 3000);

4

0 回答 0