切换webhosts

时间:2017-04-17 15:56:27

标签: jquery twitter-bootstrap twitter-bootstrap-3

好的,最近我们从Arvixe切换到我们网络主机的Squidix。在Arvixe上一切正常,但在Squidix上,我的Bootstrap 3 Carousel停止按预期工作。例如,上一个和下一个指标不会进展到上一张或下一张幻灯片。位于旋转木马中间的指示器指示您所在的滑动装置,不再起作用。

我正在使用带有Jquery 1.12的Boostrap 3.3.7。我尝试切换到Jquery 3.2.1,它没有任何效果。我在这里错过了什么?我的代码突然错了吗?它是主持人吗?不同的主机如何影响jquery和bootstrap的工作方式?

这是我的轮播代码:

   <!-- Slider Section -->
<section id="main-slider" class="no-margin">
    <div class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0"></li>
            <li data-target="#main-slider" data-slide-to="1" class="active"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item" style="background-image: url(images/slider/bg1.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 class="animation animated-item-1">Full Production Printing Services since 1969!</h1>
                                <h2 class="animation animated-item-2">Sault Printing Company has a wide variety of printing services available for your business today!</h2>  <a class="btn-slide animation animated-item-3" href="services.php">Read More</a>
                            </div>
                        </div>
                        <div class="col-sm-6 hidden-xs animation animated-item-4">
                            <div class="slider-img">
                                <img src="images/slider/brochures.fw.png" class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item active" style="background-image: url(images/slider/bg2.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 class="animation animated-item-1">Authorized Ricoh Dealer and Service Center</h1>
                                <h2 class="animation animated-item-2">We are the U.P.'s premier Authorized Ricoh Dealer and Service Center. We stand behind our products and know you will too!</h2>  <a class="btn-slide animation animated-item-3" href="equipment.php">Read More</a>
                            </div>
                        </div>
                        <div class="col-sm-6 hidden-xs animation animated-item-4">
                            <div class="slider-img">
                                <img src="images/slider/img2%20small.fw.png" class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" style="background-image: url(images/slider/bg3.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 class="animation animated-item-1">Your local Office Supply Dealer</h1>
                                <h2 class="animation animated-item-2">We offer a huge array of office items in store, and if we don't have it in stock, check out our over 1600 page catalog! Free shipping and delivery on every order.</h2>  <a class="btn-slide animation animated-item-3" href="http://www.ecinteractiveplus.com/100401" target="_blank">Order Online</a>
                            </div>
                        </div>
                        <div class="col-sm-6 hidden-xs animation animated-item-4">
                            <div class="slider-img">
                                <img src="images/slider/img3.fw.png" class="img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev"> <i class="fa fa-chevron-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next"> <i class="fa fa-chevron-right"></i>
    </a>
</section>

正如你所看到的,我有一个名为“main-slider”的主旋转木马,我首先在中间幻灯片上有一个活动元素,然后用#main-slider正确调用数据目标。我先在页脚中加载jquery,然后再加载bootstrap.min.js

在我的页脚中,我有:

<script type='text/javascript'>
    $(document).ready(function() {
         $('.carousel').carousel({
             interval: 6000
         })
    });    
</script>

这在转换定时6秒时效果很好。我很茫然。我没有任何问题在同一主机上的bootstrap 4中为另一个具有工作控件的站​​点运行轮播。为什么bootstrap 3会成为一个问题?这是编码问题还是网络主机问题?如果它是一个Web主机问题,可能会导致这样的事情?

0 个答案:

没有答案