Javascript 网站上冲突元素的疑难解答

我在一个网站上工作，似乎有冲突的因素

我从包含大量来自不同地方的“借用”CSS和JS元素开始，现在我尝试添加一个，JS或CSS中存在冲突，阻止我编辑滑动条（滑动条代码的一部分已经出现在“有机农场”模板中）

现在我将

js/core.min.js

、

js/script.js

和

js/slick.js

加载到页面中，然后在索引页面的底部：

<script type="text/javascript">
    $(document).ready(function(){
      $('.swiper-slide').slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          centerMode: true,
          variableWidth: true,
      });
    });
</script>

$（文档）.ready（函数（）{
$（'.swiper slide'）。光滑({
点：是的，
无限：是的，
速度:300,，
幻灯片放映：1，
centerMode：对，
可变宽度：true，
});
});

HTML部分是：

  <section class="section">
    <div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
      <div class="swiper-wrapper swiper-wrapper-custom">
        <div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
          <div class="swiper-slide-caption">
            <div class="container text-center">
              <div class="row justify-content-center">
                <div class="col-md-9 col-lg-8 top">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
          <div class="swiper-slide-caption">
            <div class="container text-center">
              <div class="row justify-content-center">
                <div class="col-md-9 col-lg-8 top">
                </div>
              </div>
            </div>
          </div>
        </div>

---

有没有办法找出为什么我的自定义脚本不处于活动状态？箭头也没有出现。对于任何HTML和CSS，我都使用Firefox的Inspector，但在这里我真的被难住了。

需要考虑两件事：

1） 使用slick.js时，通常会将其添加到元素中，该元素是一组元素的父元素，然后这些元素会转换为幻灯片。例如：

<div id="slide-wrapper">
    <div class="my-slide">...</div>
    <div class="my-slide">...</div>
    <div class="my-slide">...</div>
</div>

$('.slide-wrapper').slick({
    ...
});

2） 更可能的问题是，您与另一个幻灯片放映库Swiper.js（）的设置存在冲突，该库使用的类包括

Swiper container

、

Swiper wrapper

和

Swiper slide

。要实现该幻灯片放映，您必须在页面上包含该库，并使用以下内容初始化幻灯片放映：

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

---

需要考虑两件事：

1） 使用slick.js时，通常会将其添加到元素中，该元素是一组元素的父元素，然后这些元素会转换为幻灯片。例如：

<div id="slide-wrapper">
    <div class="my-slide">...</div>
    <div class="my-slide">...</div>
    <div class="my-slide">...</div>
</div>

$('.slide-wrapper').slick({
    ...
});

2） 更可能的问题是，您与另一个幻灯片放映库Swiper.js（）的设置存在冲突，该库使用的类包括

Swiper container

、

Swiper wrapper

和

Swiper slide

。要实现该幻灯片放映，您必须在页面上包含该库，并使用以下内容初始化幻灯片放映：

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

---

您是否在控制台中看到任何JavaScript错误？此外，如果您可以在问题中包含HTML中包含幻灯片元素的部分（例如

.swiper slide

），这将非常有用。如果您的页面上包含了两次slick.js库，您肯定会遇到问题。@EdLucas我添加了HTML部分。您是否在控制台中看到任何JavaScript错误？此外，如果您可以在问题中包含HTML中包含幻灯片元素的部分，这将非常有用（例如，

.swiper幻灯片

）。如果slick.js库在您的页面上出现两次，您肯定会遇到问题。@EdLucas我添加了HTML部分，非常感谢Ed。事实上，这是一个复杂的问题，两个相互竞争的系统之间的CSS声明名称相同，我认为从所有相关的代码中清除样式表并不容易。我我采取另一种方法谢谢！非常感谢Ed。确实是一个复杂的问题，两个相互竞争的系统之间的CSS声明具有相同的名称，我认为从所有相关的代码中清除样式表并不容易。我将采取另一种方法谢谢！