解决网站上的冲突元素

Question

我在网站上工作，似乎有相互冲突的元素。

我从 a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow 开始，JS 或 CSS 中存在冲突，导致我无法编辑 Slick 滑块（部分 slick-slider 代码"Organic Farm" 模板中已经存在）。

现在我将 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>

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 的检查器，但在这里我真的很困惑。

Answer 1

需要考虑两件事：

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({
    ...
});

在您的情况下，这意味着将 Slick 添加到 swiper-wrapper:

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

2) 更可能的问题是您与完全不同的幻灯片放映库的设置发生冲突，Swiper.js (https://swiperjs.com/api/)，它使用类像 swiper-container、swiper-wrapper 和 swiper-slide。要实现该幻灯片，您必须在您的页面上包含该库并使用以下内容初始化幻灯片：

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

解决网站上的冲突元素

Troubleshooting conflicting elements on a website

javascript

slick.js

swiperjs